案例：美女时钟

思路：

打开页面就有图片按每秒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. 【Luogu P1439】最长公共子序列（LCS）

    Luogu P1439 令f[i][j]表示a的前i个元素与b的前j个元素的最长公共子序列 可以得到状态转移方程: if (a[i]==b[j]) dp[i][j]=dp[i-1][j-1]+1; d ...

  2. 【2018寒假集训Day 7】【最短路径】三种算法的模板

    Luogu单源最短路径模版题 dijkstra #include<cstdio> #include<vector> using namespace std; const int ...

  3. day01_爬虫和数据

    1.什么是爬虫 1.1.爬虫的定义   脚本,程序--->自动抓取万维网上信息的程序. 1.2.爬虫的分类 ​ 2.1.通用爬虫 ​ 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google ...

  4. 对 /langversion 无效；必须是 ISO-1、ISO-2、3、4、5 或 Default

    反编译或者.net用更高版本打开时会出现这个问题,解决办法如下: 1.网页版程序,将解决方案中的Web.config中的 /langversion 的值改为指定的值,既可以解决,我这里采用的是默认值, ...

  5. session与cookie的介绍和两者的区别之其相互的关系

    转:https://blog.csdn.net/weixin_37196194/article/details/55806366 本文分别对Cookie与Session做一个介绍和总结,并分别对两个知 ...

  6. 实例详解——编译器命令#pragma section作用于函数时作用域是否覆盖到其子函数

    在之前的博客[链接脚本(Linker Script)应用实例(一)使用copy table将函数载入到RAM中运行]中,我们第一步使用#pragma section命令将PFlashProgram函数 ...

  7. Nginx专题（2）：Nginx的负载均衡策略及其配置

    本文介绍了Nginx的负载均衡策略,一致性hash分配原理,及常用的故障节点的摘除与恢复配置. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第一期-宜信支付结算八方数据团队高级技术经理 ...

  8. windows下RocketMQ下载安装教程

    一.下载(原文链接:http://www.studyshare.cn/software/details/1183/0 ) 1.官网下载:下载地址   2.百度网盘下载:下载地址 提取码:0g5a ja ...

  9. Spring之跨重定向请求传递数据

    摘要 在开发场景中,大部分数据都是使用请求转发(forward)进行传递,而使用重定向(redirect)传递数据可能比较少. 那么问题来了:请求中的数据生命周期存活时间只在一个请求转发(reques ...

  10. CoderForces 163E e-Government(AC自动机+树状数组维护fail树的dfs序)

    E. e-Government time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...