案例：美女时钟

思路：

打开页面就有图片按每秒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. 多进程使用同一log4j配置导致的日志丢失与覆盖问题

    最近接手了一个流传很多手的魔性古早代码,追日志时发现有明显缺失.对log4j不熟,不过可以猜测日志出问题肯定和多进程使用同一个log4j配置有关.经多次排查,终于捋清了其中逻辑.本文对排查过程进行复盘 ...

  2. 基于 HTML5 + WebGL 的太阳系 3D 展示系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  3. 本地存储常用方式 localStorage, sessionStorage，cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  4. php mysql 中文乱码解决，数据库显示正常，php调用不正常

    一般来说,乱码的出现有2种原因,首先是由于编码(charset)设置错误,导致浏览器以错误的编码来解析,从而出现了满屏乱七八糟的“天书”,其次是文件被以错误的编码打开,然后保存,比如一个文本文件原先是 ...

  5. rem布局方案

    移动端适配,老生常谈的问题,这次再谈一次. 闲话少说,直奔正题. 一些像素概念 物理像素:即实际的每一个物理像素,也就是移动设备上每一个物理显示单元(点) 设备逻辑像素(css中的px):可以理解为一 ...

  6. Spring boot如何快速的配置多个Redis数据源

    简介 redis 多数据源主要的运用场景是在需要使用多个redis服务器或者使用多个redis库,本文采用的是fastdep依赖集成框架,快速集成Redis多数据源并集成lettuce连接池,只需引入 ...

  7. MyBatis系列（一） MyBatis入门

    前言 MyBatis官方文档:https://mybatis.org/mybatis-3/zh/index.html MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由 ...

  8. mac 命令记录

    1. 安装 mysqlworkbench brew search mysql brew tap caskroom/cask brew cask search mysql brew cask insta ...

  9. Java修炼——异常的概念以及处理方式（捕获异常）

    异常概念分类 异常( Exception 也称例外)就是在程序的运行过程中 所发生的不正常的事件,它会中断正在运行的程序  所需文件找不到  网络连接不通或中断  算术运算错 (被零除-)  ...

  10. CF 1130A 1130B 1130C1129A1 1129A2 1129B(Round542A B C D1 D2 E)题解

    A : Be Positive 题目地址:https://codeforces.com/problemset/problem/1130/A 题解:让你求是否满足一个d使得数列长为n的a数组的每个数除以 ...