案例：美女时钟

思路：

打开页面就有图片按每秒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. Python--将文件夹中图片按照横屏竖屏进行分类

    搬运链接:https://www.jianshu.com/p/c8be54282e77 """ 可以遍历输入的路径的指定后缀的文件,主要是用来筛选图片,将图片分成 横屏, ...

  2. kubernetes实战(二十九)：Kubernetes RBAC实现不同用户在不同Namespace的不同权限

    1.基本说明 在生产环境使用k8s以后,大部分应用都实现了高可用,不仅降低了维护成本,也简化了很多应用的部署成本,但是同时也带来了诸多问题.比如开发可能需要查看自己的应用状态.连接信息.日志.执行命令 ...

  3. Spring（Bean）6

    生命周期构造 --->set--->Bean init前后执行 (新创建 类) public class MyBeanPostProcesser implements BeanPostPr ...

  4. PHP后端代码生成微信小程序带参数的二维码保存成jpg图片上传到服务器getwxacodeunlimit

    老板最近有点飘了,他要在PC端的网站放一个微信小程序的二维码,并且扫描这个二维码以后要跳到小程序对应的房源详情页. 这是微信官方给出的文档,连接地址:https://developers.weixin ...

  5. Linux机器相互登录

    1周第4次课(3月22日)课程内容: 1.16 Linux机器相互登录 Linux相互登录可以分2种方式,一种为ssh +IP地址,然后输入对应的root密码,一种为密钥验证方式,其中一台机器放公钥, ...

  6. 【我的物联网成长记6】由浅入深了解NB-IoT【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  7. swift实现单例的四种方式

    单例模式 单例模式是设计模式中最简单的一种,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象. 当你只需要一个实例的时候需要使用单例 ...

  8. Statistics ： Data Distribution

    1.Normal distribution In probability theory, the normal (or Gaussian or Gauss or Laplace–Gauss) dist ...

  9. B.Beautiful Numbers

    题意:你被给予了一个序列 p = [p1, p2, ..., pn](1 ~ n的整数),如果存在l, r左右端点(1 <= l <= r <= n),使得[pl, pl+1,... ...

  10. Linux基础 - Crontab定时任务

    目录 设置Cron任务 创建任务 设置运行周期 配置命令 常见问题 如何列出所有的Cron任务 如何查看Cron任务运行log 如何配置带有虚拟venv的Python脚本 如何在Cron 任务中发送邮 ...