效果如下图

附件有图片   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. UVA 572 (dfs)

    题意:找出一块地有多少油田.'@'表示油田.找到一块就全部标记. #include<cstdio> #define maxn 110 char s[maxn][maxn]; int n,m ...

  2. 解决java使用https协议请求出现证书不信任问题（PKIX path building failed）

    解决https请求时出现pkix path building fail错误 方法 将submail.cer 安全证书导入到java中的cacerts证书库 (sumail是我从https://api. ...

  3. C语言结构体位域

    demo: typedef struct { int a:2; int b:2; int c:1; }test; int main() { test t; t.a=1; t.b=3; t.c=1; / ...

  4. iOS_仿QQ表情键盘

    当UITextFiled和UITextView这种文本输入类控件成为第一响应者时,弹出的键盘由他们的一个UIView类的inputView属性来控制,当inputView为nil时会弹出系统的键盘,想 ...

  5. NewQuant的设计（二）——MatrixComputation的领域分析

    NewQuant的设计——MatrixComputation的领域分析 MatrixComputation是NewQuant中最重要也是最大的一个模块,这个模块的领域分析要从回答几个问题开始. 一.矩 ...

  6. C/C++变量名与值的问题

    首先说明变量名是不占空间的. 变量:用来标识一块内存空间,这块内存区域的值一般是可以被该的. 而const常量通常限定这一块内存区域的值是不可被更改的. 变量名:只是一个标识符,并不占内存空间.在c的 ...

  7. (译) Conditional Variational Autoencoders 条件式变换自编码机

    Conditional Variational Autoencoders --- 条件式变换自编码机 Goal of a Variational Autoencoder: 一个 VAE(variati ...

  8. ecstore-app接口

    接口调用方式: 接口完整地址为:http://域名/index.php/wapapp/请求地址 比如获取商品信息就是 http://域名/index.php/wapapp/product.html 提 ...

  9. Three.js开发指南---使用构建three.js的基本组件（第二章）

    .gui本章的主要内容 1 场景中使用哪些组件 2 几何图形和材质如何关联 3 正投影相机和透视相机的区别 一,Three所需要的基本元素 场景scene:一个容器,用来保存并跟踪所有我们想渲染的物体 ...

  10. jersy服务，将图片发送另个服务器，再将异步返回

    今天在学习新项目时,遇到了jersy服务,完成,将图片发送到另一台服务器.下面介绍一下jersy服务的一个简单例子. 1.建立一个jersy一个java项目,先导入jersy服务相应的jar包 com ...