案例：美女时钟

思路：

打开页面就有图片按每秒1张的顺序轮换，用到了日期对象，获取小时和秒。

封装到一个命名函数后，为了使页面打卡就有图片的轮换，先调用下f1，再设置setInterval

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>title</title>

</head>

<body>

  <img src="" alt="" id="im" />

  <script src="common.js"></script>

  <script>

    function f1() {

      //获取当前时间

      var dt = new Date();

      //获取小时

      var hour = dt.getHours();

      //获取秒

      var second = dt.getSeconds();

      hour = hour < 10 ? "0" + hour : hour;

      second = second < 10 ? "0" + second : second;

      my$("im").src = "meimei/" + hour + "_" + second + ".jpg";

    }

    //打开页面先调用f1，这样打开来就有图片，不用等待

    f1();

    //页面加载哇麻痹后，过了1，秒才执行函数的代码

    setInterval(f1, 1000);

  </script>

</body>

</html>

JS---案例：美女时钟的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  3. js绘制圆形时钟

    纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. c#学习系列之Application.StartupPath的用法（美女时钟的做法）

    Application.StartupPath是一个只读属性,是不可以设置的. Application.StarupPath获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称.既是Appli ...

  6. 第一个Vue.js案例

    第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...

  7. js案例之使用正则表达式进行验证数据正确性

    #js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...

  8. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  9. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

随机推荐

  1. linux进程管理常用命令

    初始化进程在centos5,6,7中的发展: 在centos5中使用sysv init 是一个shell脚本,依靠依次执行脚本中的命令启动系统,只能串行执行. 在centos6中使用upstart,也 ...

  2. vue e.path 移动端兼容

    作用 e.path 用来获取点击元素及以上所有父元素的一个数组 问题 当在移动端会有获取不到e.path的问题 不兼容 解决 let path = event.path || (event.compo ...

  3. 【Android - 组件】之Activity生命周期的全面分析

    Activity是Android四大组件之首,其重要性不言而喻,Activity的生命周期更是我们了解Android工作机制的重中之重.我们一般将Activty的生命周期做两种情况下的理解,即正常情况 ...

  4. nginx重启后，反向代理失败之问题排查记录

    问题与排查过程 本地开发环境的服务器,部署了nginx,nginx上对静态的web前端页面进行了http 80端口代理:然后呢,因为一些原因,服务器重启了,重启服务器后,我去把nginx启动起来,但是 ...

  5. python-模块，异常,环境管理器

    模块 Module 什么是模块: 1.模块是一个包含有一系列数据,函数,类等组成的程序组 2.模块是一个文件,模块文件名通常以.py结尾 作用: 1.让一些相关数据,函数,类等有逻辑的组织在一起,使逻 ...

  6. Spring之junit测试集成

    简介 Spring提供spring-test-5.2.1.RELEASE.jar 可以整合junit. 优势:可以简化测试代码(不需要手动创建上下文,即手动创建spring容器) 使用spring和j ...

  7. js实现冒泡排序（bubble sort）快速排序（quick sort）归并排序（merge sort）

    排序问题相信大家都比较熟悉了.用js简单写了一下几种常用的排序实现.其中使用了es6的一些语法,并且不仅限于数字--支持各种类型的数据的排序.那么直接上代码: function compare (a, ...

  8. 转:SQL SERVER 2014 安装图解（含 SQL SERVER 2014 安装程序共享）

    开篇介绍 2015年1月1日,新的一年开始之际,本来应该好好做点有意义的事情来跨个年的.结果,老习惯 - 睡觉之前一定要折腾一下电脑,说干就干,给新到的 DELL 电脑装虚机,下载 SQL SERVE ...

  9. 3Sum Time Limit Exceeded HashMap 优化过程

    昨晚,在做leetcode上的3Sum题目时,感觉这道题目和2Sum很像,当时解决2Sum时,思路如下: 用HashMap的key存储 num[i],value存储下标 i,之后在遍历数组num时,判 ...

  10. js 防抖、截流

    突发奇想,在触发事件的时候,一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿,比如onresize,onscroll,onmousemove等事件. 然后就引出了一个新知识点:防抖. ...