<!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. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

  2. Unity3D笔记 切水果二 刀光剑影

    一.步骤一创建一个空GameObject.js 二.代码 #pragma strict var myColor:Color; var firstPosition:Vector3;//鼠标点击的第一个点 ...

  3. webp图片优化

    根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试.假如你打算在 ...

  4. backBone.js之Model篇 (1) 简单实例

    “Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这 ...

  5. ThinkCMF----调用指定栏目的文章列表

    做项目的时候,在用ThinkCMF在首页调用指定的栏目文章,但是没有找到好的方法,就自己写了一个. 但是又不想写标签,就在公用方法里面实现了:找到common.php 操作数据库,要用到think的控 ...

  6. 阿里云liunx-ubuntu安装中文

    ubuntu安装中文支持--让你的ub真正变成中文作者: 来源:ubuntu在安装的时候会提示选择语言,但选择了中文之后,系统里面还有很多英文并不是ub对中文支持不好 你根本就没有安装中文支持~ 首先 ...

  7. Saltstack之SaltSyndic

    SaltSyndic 1,SaltSyndic必须运行在salt-master上面 2,Syndic要连接另外一个Master比它更高级 在master安装syndic yum -y install ...

  8. POJ-2336 Ferry Loading II（简单DP）

    Ferry Loading II Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3763 Accepted: 1919 Desc ...

  9. 猿团专访 |以技术推动发展 msup 成为企业经验智库

    随着企业的发展,几乎所有的管理者都有同样一个痛点:如何才能让自己的团队变得更强,技术能力更能匹配企业发展需求?msup的创立毫无疑问解决了这个难点. 麦思博(msup)有限公司发源于美国西雅图,是一家 ...

  10. ubuntu16.04配置tensorflow-gpu环境

    1.安装驱动 参考: 史上最全的ubuntu16.04安装nvidia驱动+cuda9.0+cuDnn7.0 https://blog.csdn.net/qq_31215157/article/det ...