效果如下图

附件有图片   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. 《C与指针》第十三章练习

    本章例程 13.1类型无关的链表查找 #include <stdio.h> #include "node.h" Node *search_list(Node *node ...

  2. 庞巴迪TCMS学习笔记之一（IEC 61131-3函数）

    在学习列车TCMS系统的软件逻辑图时会遇到IEC 61131-3的语言.其中通用的图形化函数总结如下.

  3. o-sync-and-o-direct

    https://lwn.net/Articles/457667/ https://lwn.net/Articles/457667/ https://lwn.net/Articles/457667/ h ...

  4. PHP递归重新排序无限级分类数组

    public static function Menus($id,$spac=0){ /* $data = array( 1 => array('id' => 1,'name' => ...

  5. ILGenerator.Emit动态 MSIL编程(三)之动态代理

    using System; using System.Linq; using System.Reflection; using System.Reflection.Emit; public seale ...

  6. iPhone4下window各个部分的高度

  7. php curl ftp上传 下载

    下载 //初始化 $ch=curl_init(); //文件的准确路径url curl_setopt($ch,CURLOPT_URL,"ftp://192.168.151.126/wwwro ...

  8. npm镜像

    npm config set registry https://registry.npm.taobao.org // 配置后可通过下面方式来验证是否成功 npm config get registry ...

  9. DOJO DOM 功能

    In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...

  10. 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题

    项目中需要使用app本地css.js,并且可以根据服务下发自动更新本地css.js.测试发现只要更新后的css或者js和更新前路径一致,webview加载的还是更新前的css.js.怀疑是webvie ...