效果如下图

附件有图片   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. Java异常简介

    异常指异于常态,和正常情况不一样,有错误出现.阻止当前方法或作用域执行的问题,称之为异常. Java中所有的与异常有关的类都继承于Throwable类,Throwable类有两个儿子,一个是Error ...

  2. MySQL中函数CONCAT及GROUP_CONCAT

    一.CONCAT()函数CONCAT()函数用于将多个字符串连接成一个字符串.使用数据表Info作为示例,其中SELECT id,name FROM info LIMIT 1;的返回结果为+----+ ...

  3. Ext.Net 学习随笔 003 Panel基本使用

    Panel() 1.使用Content和Html属性设置Panel内容 前台View代码 @(X.Panel() .ID("panel1") .Width() .Height() ...

  4. 【OPENGL】第三篇 着色器基础（一）

    在这一章,我们会学习什么是着色器(Shader),什么是着色器语言(OpenGL Shading Language-GLSL),以及着色器怎么和OpenGL程序交互. 首先我们先来看看什么叫着色器. ...

  5. mysql学习之触发器

    在借阅表和读者表当中存在着这样的关系,如果在借阅表当中添加一条数据,读者表当中对应的累计借书字段就自增1,如果在借阅表当中删除一条数据,读者表当中对应的累计借书字段就自减1,实现本功能的方法如下. 1 ...

  6. VS高效开发快捷键

    Ctrl + Tab 标签切换 Ctrl + '-'向后导航 Ctrl + Shift+'-'向前导航 Ctrl +Shift +空格  提示函数参数 Ctrl +F4 退出本标签 Ctrl+F 查找 ...

  7. 微信上传文章素材—ASP.NET MVC从View层传数据到Controller层

    View层: $('#btnNews').click(function() { if (!confirm('确定要提交吗?')) { return; } var frontViewData = []; ...

  8. ASP.NET MVC图片上传

    工具:ssi-uploader $('#id').ssi_uploader({ url: 'path' }); public ActionResult path() { HttpPostedFileB ...

  9. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  10. 采用sqlserver的缺省配置，在生产环境经常碰到系统响应慢（甚至hung的情况）

    请重视并正确配置sqlserver实例及数据库的参数,一般化的配置推荐如下: 1.数据和日志文件的初始大小分别设置为10G和2G,均设置为按照固定200M大小增长,不限制最大值: 2.sever实例设 ...