<!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. 升级后重启造成fsck.ext3: Unable to resolve UUID

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

  2. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验九：PS/2模块③ — 键盘与多组合键

    实验九:PS/2模块③ — 键盘与多组合键 笔者曾经说过,通码除了单字节以外,也有双字节通码,而且双字节通码都是 8’hE0开头,别名又是 E0按键.常见的的E0按键有,<↑>,<↓ ...

  3. 安装cnpm

    使用淘宝镜像的cnpm $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  4. Visual Studio 2012创建SQL Server Database Project提示失败解决方法

    新建一个SQL Server Database Project,提示: Unable to open Database project This version of SQL Server Data ...

  5. redmine生产环境搭建

    记录信息: 搭建基础应用及mysql 配置svn 配置自动重启 配置API开放 配置邮箱发送 开启数据库ip访问权限 确认用户组管理:配置用户同步 配置部门同步

  6. 自定义容器启动脚本报错：exec user process caused "no such file or directory"

    创建容器起不来,一直是restarting状态,查看容器的报错日志如下: standard_init_linux.go:178: exec user process caused "no s ...

  7. SQL Server2008 R2 安装失败后的解决办法

    当你第一次安装SQL Server2005,SQL Server2008,SQL Server2012失败后,第二次重新安装一般还是容易安装失败,原因就是你没有完全卸载,还存留残留文件和注册表. 我安 ...

  8. js---PC端滑动进度条

    这个是PC端的滑动进度条效果: <!doctype html> <html lang="en"> <head> <meta charset ...

  9. Shell脚本导入外部脚本内容

    vim subscript.sh #!/bin/bash tool="ApacheSpark" vim main.sh #!/bin/bash source /home/wx/su ...

  10. Java工程师之SpringBoot系列教程前言&目录

    前言 与时俱进是每一个程序员都应该有的意识,当一个Java程序员在当代步遍布的时候,你就行该想到我能多学点什么.可观的是后端的框架是稳定的,它们能够维持更久的时间在应用中,而不用担心技术的更新换代.但 ...