<!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. javascript解析器原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤 1. “找一些东西”: v ...

  2. Big Spatio temporal Data(R-tree Index and NN & RNN & Skyline)

    一.简单介绍大数据技术产物 “大数据”一词首先出现在2008年9月<Nature>杂志发表的一篇名为“Big Data: Wikiomics”的文章上(Mitch,2008).“大数据科学 ...

  3. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十二：串口模块① — 发送

    实验十二:串口模块① — 发送 串口固然是典型的实验,想必许多同学已经作烂,不过笔者还要循例介绍一下.我们知道串口有发送与接收之分,实验十二的实验目的就是实现串口发送,然而不同的是 ... 笔者会用另 ...

  4. RabbitMQ服务端配置详解（转自：http://www.cnblogs.com/zhen-rh/p/6884297.html）

    RabbitMQ支持三种配置方式: 1) 读取环境变量中配置, 这包括shell中环境变量和rabbitmq-env.conf/rabbitmq-env-conf.bat文件中配置的环境变量 可配置如 ...

  5. Supervisor安装与配置（Linux/Unix进程管理工具）

    原文链接:http://blog.csdn.net/xyang81/article/details/51555473 Supervisor(http://supervisord.org/)是用Pyth ...

  6. JSTL 学习

    对于页面访问数据的统计,可以使用内置对象的相应方法进行计数工作,这个对象要在jsp对象的整个生命周期中setAttribute()和getAttribute()application.setAttri ...

  7. oracle union 用法

    [sql] view plaincopyprint?众所周知的几个结果集集合操作命令,今天详细地测试了一下,发现一些问题,记录备考. 假设我们有一个表Student,包括以下字段与数据: drop t ...

  8. Linux下搭建hadoop开发环境-超详细

    先决条件:开发机器需要联网 已安装java 已安装Desktop组 1.上传安装软件到linux上: 2.安装maven,用于管理项目依赖包:以hadoop用户安装apache-maven-3.0.5 ...

  9. hadoop HA架构安装部署（QJM HA）

    ###################HDFS High Availability Using the Quorum Journal Manager########################## ...

  10. Oracle体系结构之Oracle静态监听配置模板

    1.监听程序配置:[oracle@localhost admin]$ vim listener.ora# listener.ora Network Configuration File: /u01/a ...