<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>时钟</title>

<script>

function set(obj){

if(obj<10){

return '0'+obj;

}

else

return ''+obj;

}

window.onload=function(){

var aImg=document.getElementsByTagName('img');

function tick(){

var oDate=new Date();

var str=set(oDate.getHours())+set(oDate.getMinutes())+set(oDate.getSeconds());

for(var i=0;i<str.length;i++){

aImg[i].src='img/'+str[i]+'.png';

}

}

tick();

setInterval(tick

,1000);

//alert(str);

};

</script>

</head>

<body style="background:red; color:red; font-size:50px">

<img src='img\0.png' /    >

<img src='img\0.png' />

:

<img src='img\0.png' />

<img src='img\0.png' />

:

<img src='img\0.png' />

<img src='mg\0.png' />

</body>

</html>

定时器小应用+date对象。。。

关键在于字符串的处理。。。。

将date对象中获取的数字不会按字符串加在一起，自定义set函数将返回值全变为字符串并在个位数前补0.。。。。。

再处理每个img标签。。。配以炫酷的png/jpg图像，效果好的很。。。。

js数字时钟的更多相关文章

  1. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  2. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  3. js实现动态数字时钟

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

  4. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  6. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  7. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

  8. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

  9. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

随机推荐

  1. Java中使用二重循环打印沙漏图形

    1.首先判断外层,A .B.C.D都符合条件 2.那么再看内层 A :int i=0;i<5;i++ 当i=1时;带入到第二个内层循环中 int j=0;j<Math.abs(i)*2+1 ...

  2. arrayLen

    var i;for (i = categoryList.length - 1; i >= 0; i -= 1) { var categoryValue=categoryList[i]; if ( ...

  3. AOP基础—代理模式

    代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关系,一个代 ...

  4. Win环境下的文件读写

    在win环境下,有许多方法可以对文件进行读写操作,如MFC 中的CFile类,及一些开源的项目如QT中的QFile.开源的好得是可以多平台,而MFC只是微软自家的东西,对于想写跨平台的人,最好不用MF ...

  5. crack a router

    1. using hydra dhclient eth0 hydra -l admin -P /c0do/passwd.lst -0 ns -f -v 192.1681.1 htp-get / hyd ...

  6. 关于C语言的问卷调查（作业三）

    1.你对自己的未来有什么规划?做了哪些准备? 答:我对我未来的规划就是希望能够学有所用,将来可以从事有关IT方面的,跟自己的专业对口.为此现在我需要多看一些和这个专业有关的书籍,自学一些知识,多些一些 ...

  7. HTML5和CSS3的一些新特性

    html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 新特性: 1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标 ...

  8. asp.net DataTable 修改列值

    /// <summary> /// 修改数据表DataTable某一列的类型和记录值(正确步骤:1.克隆表结构,2.修改列类型,3.修改记录值,4.返回结果) /// </summa ...

  9. SharePoint 2013 CSOM 对象模型属性包

     博客地址:http://blog.csdn.net/FoxDave 虽说是翻译,但是并没什么翻译的,主要内容就是说有一些能通过Server API配置的Site/Web属性在CSOM中找不到,其 ...

  10. sql语句格式化数字(前面补0)、替换字符串

    以下是详细分析: 1.select power(10,3)得到1000(即:10的3次方) 2.select cast(1000+33 as varchar) 将1000转换类型(即:将int转化成v ...