<!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. 跟我一起写Makefile:使用函数

    跟我一起写Makefile:使用函数 两个排版不一样 书籍下载 书籍下载

  2. war部署到tomcat

    gs-rest-service-0.1.0.war复制到tomcat-9.0.0.M17\webapps\ 打开server.xml,这Host节点,加入<Context path=" ...

  3. call()、apply()和bind()的异同

    相同点: 改变this的指向: var a = { name:"丸子", fn:function(){ console.log(this.name); } } var b = a. ...

  4. linux常用命令大全2--挂载/dpkg/文件系统分析/apt/光盘/关机

    挂载一个文件系统 mount /dev/hda2 /mnt/hda2 挂载一个叫做hda2的盘 - 确定目录 '/ mnt/hda2' 已经存在 umount /dev/hda2 卸载一个叫做hda2 ...

  5. ELK系列一：ELK的安装

    一.Elasticsearch.Kibana.Logstash.Elasticsearch-head的安装 ELK的安装 安装下载地址: https://www.elastic.co/cn/downl ...

  6. vue-loader的简单例子

    一.模块加载器 1.broserify 模块加载器, 只能加载js 2.webpack 模块加载器, 一切东西都是模块, 最后打包到一块 .vue文件  ==> 需要用webpack编译成浏览器 ...

  7. DependencyProperty属性介绍

    1  DependencyProperty从属属性 1.     从属属性要定义为静态.为了在外部可以绑定,最好定义为Public 2.     从属属性实际上是取代了正常属性的存值变量 3.     ...

  8. MUI---IOS切换到后台继续播放音乐

    应用切换到后台继续音乐播放HBuilder默认生成的应用在iOS是不支持后台音乐播放的,当应用切换到后台时音乐将暂停播放,下次切换到前台继续播放.如果要支持应用切换到后台后继续播放音乐功能需要进行额外 ...

  9. C++和Java中的静态Static用法

    C++和Java中都有的一个静态关键字Static,可以放在类中的变量或者函数之前,就成了静态变量或者静态函数. 静态变量又分为静态全局变量和静态局部变量,可参见网上大神总结的C++全局变量,局部变量 ...

  10. POJ--1690 (Your)((Term)((Project)))（字符串处理）

    (Your)((Term)((Project))) Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 3353 Accepted: ...