案例：美女时钟

思路：

打开页面就有图片按每秒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执行系统命令的四种方法

    一.os.system方法 在子终端运行系统命令,可以获取命令执行后的返回信息以及执行返回的状态.执行后返回两行结果,第一行是结果, 第二行是执行状态信息,如果命令成功执行,这条语句返回0,否则返回1 ...

  2. sed和awk的简单使用

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以  行 为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法. 语法: sed [-nefri] ‘ ...

  3. Java的证书：HTTPS与SSL

    在取得connection的时候和正常浏览器访问一样,仍然会验证服务端的证书是否被信任(权威机构发行或者被权威机构签名):如果服务端证书不被信任,则默认的实现就会有问题,一般来说,java在访问ssl ...

  4. Prometheus 安装

    目录 简介 安装部署 环境准备 安装 配置环境变量 配置 启动 简介 prometheus存储的是时序数据,即按相同时序(相同名称和标签),以时间维度存储连续的数据的集合. 时序(time serie ...

  5. OpenStack - keystone 问题 'NoneType' object has no attribute 'service_catalog'

    'NoneType' object has no attribute 'service_catalog' 报错 编辑:/etc/keystone/keystone-paste.ini 在[pipeli ...

  6. js前端数据验证JS工具

    var regexEnum = { intege : "^-?[1-9]\\d*$", // 整数 intege1 : "^[1-9]\\d*$", // 正整 ...

  7. 了解 MongoDB 看这一篇就够了【华为云技术分享】

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

  8. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...

  9. dubbo 发布 RPC 服务

    Dubbo 发布 RPC 服务 建立服务提供者项目 pom.xml <?xml version="1.0" encoding="UTF-8"?> & ...

  10. Python必学之编译器用哪个好？你用错了吧！

    学python要知道怎么用好编译器.当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件由于整个Pyth ...