效果如下图

附件有图片   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. LeetCode() Symmetric Tree

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...

  2. 常用的shell命令

    作为一名有10年以上使用年龄的Linux/MacOSX用户来说,键盘的作用往往要远大于鼠标.而且,作为一个黑客文化的追随者,我也希望越来越多的用户能认识到命令行的潜在价值,不要把它视为只是计算机专家们 ...

  3. Node.JS 学习路线图

    转载自:http://www.admin10000.com/document/4624.html 从零开始nodejs系列文章, 将介绍如何利Javascript做为服务端脚本,通过Nodejs框架w ...

  4. linux一些常用配置

    1.vi编辑退出不清屏 .bashrc最后加: 2.

  5. Jquery cxColor 示例演示

    今天第一次自己做调色板调用,看了半天官方的例子愣是没看懂,唉,码农老矣,尚能码否? 经过对官方下载的示例一删一浏览终于弄出来了,这么简单的东西,官方的Demo逼格也太高了 上代码: <!DOCT ...

  6. IOS开发之－－UIScrollView pagingEnabled自定义翻页宽度

    用到UIScrollview的翻页效果时,有时需要显示一部分左右的内容,但是UIScrollView的PagingEnabled只能翻过整页,下面几个简单的设置即可实现 技术点: 1. 创建一个继承U ...

  7. day22、模块-basedir、os、json模块、pickle和正则模块。

    四.正则. re模块: 作用:针对的对象:字符串, 课前引入: 例子一. s='dsdsadsadadsalexdsds's.find('alex') 如何找到字符串内部的alex;?过去学习可使用方 ...

  8. sql sever笔记 日期时间

     SET DATEFORMAT 的设置是在执行或运行时设置,而不是在分析时设置. SET DATEFORMAT 将覆盖 SET LANGUAGE 的隐式日期格式设置. 该设置仅用在将字符串转换为日期值 ...

  9. NET中的Memcached.ClientLibrary使用详解

    memcached在windows下的下载与安装 下载地址:http://pan.baidu.com/s/1yVILw       提取密码:5gx9 官方网站:http://memcached.or ...

  10. 传入url地址请求服务器api，浏览器显示图片

    @RequestMapping("/proxyImage") public void proxyImage(HttpServletRequest request, HttpServ ...