<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             margin:0;

             padding:0;

         }

         h2{

             width:50px;

             margin:0 auto;

         }

         div{

             width: 300px;

             text-align: center;

             background: red;

             margin:50px auto;

         }

     </style>

     <script type="text/javascript">

         window.onload= function () {

             getTime();

             setInterval(getTime,1000);

             function getTime() {

                 var date = new Date();

                 var hours = date.getHours();

                 var one = parseInt(hours / 10);

                 var two = parseInt(hours % 10);

                 var minutes = date.getMinutes();

                 var three = parseInt(minutes / 10);

                 var four = parseInt(minutes % 10);

                 var second = date.getSeconds();

                 var five = parseInt(second / 10);

                 var six = parseInt(second % 10);

                 var imgs = document.getElementsByTagName("img");

                 imgs[0].src = "images/" + one + ".png";

                 imgs[1].src = "images/" + two + ".png";

                 imgs[2].src = "images/" + three + ".png";

                 imgs[3].src = "images/" + four + ".png";

                 imgs[4].src = "images/" + five + ".png";

                 imgs[5].src = "images/" + six + ".png";

             }

         }

     </script>

 </head>

 <body>

 <h2>时钟</h2>

 <div>

 <img src="data:images/0.png">

 <img src="data:images/0.png">：

 <img src="data:images/0.png">

 <img src="data:images/0.png">：

 <img src="data:images/0.png">

 <img src="data:images/0.png">

 </div>

 </body>

 </html>

js时钟的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  3. [转载]FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  4. FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  5. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  6. 21个CSS3 / JS 时钟

    收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...

  7. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

  8. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

  9. js时钟&倒计时

    <!DOCTYPE HTML> <html><head><meta charset=UTF-8><title>recursion</t ...

随机推荐

  1. sencha touch list更新单行数据

    http://www.cnblogs.com/mlzs/p/3317570.html 如此章所说,点击按钮需要实时更新视图 操作代码如下: onTasteUp: function (list, rec ...

  2. 升级后重启造成fsck.ext3: Unable to resolve UUID

    这篇文章帮了我的大忙了:转载自:http://wilber82.blog.51cto.com/1124820/724472 今天在做服务器补丁部署,有一台ESX4.1的服务器在升级后重启过程中挂了,通 ...

  3. 部署OpenStack问题汇总（七）--解决apache启动错误"httpd:Could not reliably determine..."

    今天在调试openstack的时候,重启apache,出现以下报错: [root@hctrl log]# service httpd restart 停止 httpd:[确定] 正在启动 httpd: ...

  4. 删除个别主机的Know_hosts文件信息

    方法一: rm -rf ~/.ssh/known_hosts 缺点:把其他正确的公钥信息也删除,下次链接要全部重新经过认证 方法二: vi ~/.ssh/known_hosts 删除对应ip的相关rs ...

  5. .NET中字符串split的C++实现

    void CustomVersion::split(const string &s, char delim, vector<string> &elems){ istring ...

  6. C程序设计语言习题（3-5）

    编写函数itob(n,s,b),将整数n转换为以b为底的数,并将转换结果以字符的形式保存到字符串s中.e.g.itob(n,s,16)把整数n格式化为十六进制整数保存在s中. #include< ...

  7. vi 撤销操作

    'u' : 撤销上一个编辑操作 'ctrl + r' : 恢复,即回退前一个命令 'U' : 行撤销,撤销所有在前一个编辑行上的操作

  8. 【BZOJ1294】[SCOI2009]围豆豆Bean 射线法+状压DP+SPFA

    [BZOJ1294][SCOI2009]围豆豆Bean Description Input 第一行两个整数N和M,为矩阵的边长. 第二行一个整数D,为豆子的总个数. 第三行包含D个整数V1到VD,分别 ...

  9. Docker学习计划三：Dockerfile 使用

    我们使用 Dockerfile 定义镜像,依赖镜像来运行容器,因此 Dockerfile 是镜像和容器的关键,Dockerfile 可以非常容易的定义镜像内容 首先通过一张图来了解 Docker 镜像 ...

  10. 对crf++的template的理解 ©seven_clear

    这是以前的一篇草稿,当初没写完,今天发出来,但总觉得水平有限,越学越觉得自己菜,写的博客水准低,发完这篇以后就谨慎发博了,毕竟自己菜,不能老吹B,下面是原稿. 好久没更了,本来年前想写篇关于爬虫的总结 ...