效果如下图

附件有图片   http://files.cnblogs.com/files/biyongyao/时钟.rar

源代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Examples</title>

 <style type="text/css">

     body{

         background:black;

         color:white;

     }

 </style>

 <script>

     function toNum(num)   //以为当是个位数时，要显示01的状态

     {

        if (num<10)

         {return '0'+num;}

        else

         {return ""+num;}

     }

     window.onload=function()

     {

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

         function tick()

         {

              var time= new Date();

              var time1=toNum(time.getHours())+toNum(time.getMinutes())+toNum(time.getSeconds()); //获取小时分钟秒的一个字符串

              // console.log(time1);

             for (var i=0;i<obj.length;i++)     //一个有六张图片，前两张代表小时，中间两张代表分钟，后两张代表秒，

                 {

                     obj[i].src=time1[i]+'.png';   //时间字符串是什么，就显示什么图片

                 }

         }

         window.setInterval(tick, 1000);

         tick();  //为了一开始不显示000000

     }

 </script>

 </head>

 <body>

 <img src="0.png" alt="" />

 <img src="0.png" alt="" />

 ：

 <img src="0.png" alt="" />

 <img src="0.png" alt="" />

 ：

 <img src="0.png" alt="" />

 <img src="0.png" alt="" />

 </body>

 </html>

js 实现动态的图片时钟的更多相关文章

  1. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  2. 写个js动态调整图片宽高 （原创）

    <body style="TEXT-ALIGN: center;"> <div id="testID" style="backgro ...

  3. js实现动态数字时钟

    1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  5. 如何通过js和jquery获取图片真实的宽度和高度

    什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...

  6. 通过html5的range属性动态改变图片的大小

    range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果.下面贴出具体的代码,主要参照了 ...

  7. WP8.1开发中关于如何显示.gif格式动态格式图片方法

    这几天又遇到个问题,就是如何显示动态图片,本来以为和显示静态图片一样,谁知不行,在网上一查才知道WP8.1不支持.gif格式动态图片的显示: 后来又在MSDN论坛上查找,也有人问类似的问题,后来就大概 ...

  8. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  9. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

随机推荐

  1. 计算机网络自学之路-----IP协议（3）

    前面一期说到了IP层的IP协议跟ARP协议,因为IPV4协议自身有些不足的地方,为了弥补这些不足,又引入了一些别的协议.觉得这种弥补方式治标不治本~~ 1)ICMP网络控制报文协议 2)CIDR无类域 ...

  2. DOM编程 删除节点

    需求: 为每个 li 节点添加一个 confirm(确认对话框): 确定要删除 xx 的信息吗?若确定, 则删除 1,获取li所有节点 var liNodes = document.getElemen ...

  3. Sort merge join、Nested loops、Hash join（三种连接类型）

    目前为止,典型的连接类型有3种: Sort merge join(SMJ排序-合并连接):首先生产driving table需要的数据,然后对这些数据按照连接操作关联列进行排序:然后生产probed ...

  4. ubuntu12.10 源更新出错（sudo apt-get update）

    Ubuntu12.10 刚安装完发现vi编辑器无法正常使用,后来用sudo apt-get install vim 一直出错,搜索相关资源发现需要更新源 首先,备份一下Ubuntu 12.10 原来的 ...

  5. 支持无限精度无限大数的类BigNumber实现

    介绍 本篇是MathAssist的第二篇,在前言中粗略地展示了MathAssist的“计算和证明”能力,本篇开始将详细介绍其实现原理. 从计算开始说起,要实现任意大数的计算器首先得有一个类支持大数运算 ...

  6. javascript基础二数据类型

    1.数据类型 javascript中的基本数据类型有4中,undefined,number,string,boolean 1.1 typeof关键字 typeof关键字可以获取一个变量的的类型.先举个 ...

  7. iis 7.5 0x80004005 静态文件 html、js、css 500错误

    环境:iis 7.5 win7 64位 vs2012 问题:本地环境F5直接运行,没有任何问题,发布到IIS,静态文件不能访问,出现500错误,网上找了一堆解决办法,排除路径不正确,iis全部功能勾了 ...

  8. MyBatis学习（二）、SQL语句映射文件(1)resultMap

    二.SQL语句映射文件(1)resultMap SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对应的接口类的路径.写好SQL语句映射文件后,需要在MyB ...

  9. 资金归集率比率sql

    基础资料 select bd_glorgbook.glorgbookcode, nvl(replace(bd_glorgbook.glorgbookname,'集团基准账薄',''),'小计')公司名 ...

  10. C++ CTime COleTime的一些操作技巧

    strCString="2003-10-27 6:24:37"; //CString--->COleDateTime COleVariant vtime(strCString ...