<!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. app上传到App Store的快捷方法及步骤

    跳过证书的申请及配置概要文件的设置, 现在根据已有的配置概要文件及发布证书开始: 1.先在Xcode上的PROJECT和TARGETS->Build Setting->Code Signi ...

  2. （原创）如何使用selenium 驱动chrome浏览器并且打开方式为手机模式-转载请注明出处

    随着移动设备使用率的不断增加,移动页面的测试也变得越来越重要. 对于互联网公司M站的测试,如果不通过专用的appium等移动端测试工具是否还有方便快捷的办法呢?答案当然是有啊. 使用chrome dr ...

  3. Android中日期函数Calendar的一些用法和注意事项

    1.月份获取时加1 Canlendar.MONTH + 1 因为使用的是罗马历,Calendar.MONTH返回的数值不是一年中月份的值,而是当前月份距离第一个月份的差值 如:当前月份为9月份,距离1 ...

  4. Apriori on MapReduce

    Apiroi算法在Hadoop MapReduce上的实现 输入格式: 一行为一个Bucket 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 34 36 38 ...

  5. tpch-kudu

    1.在impala里建立好文本表: create external table customer (C_CUSTKEY INT, C_NAME STRING, C_ADDRESS STRING, C_ ...

  6. linux命令每日一练习　wc　more

    wc该命令统计文件行数,字数或者字节数 wc -l 统计行数 wc -w 统计字数 wc -c 统计字节数 more 显示文件内容,类似于cat more +n 从第n行开始显示 more -n 限定 ...

  7. rpc使用JUnit模块测试设计的方法及常见问题

    RPC:Remote Procedure Call 远程过程调用 Wikipedia:http://en.wikipedia.org/wiki/Remote_Procedure_Call 百度百科:h ...

  8. C# 学习电子书资料分享mobi epub等格式

    .NET之美:.NET关键技术深入解析 作者: 张子阳 出版社:机械工业出版社 大小:20.29MB 出版时间:14-01-01 格式:mobi ASP.NET 4权威指南 作者: 马伟 出版社: 大 ...

  9. vs2012 opencv 配置

    一直没有学习C++,以为该语言太过old,所以要学习新的咚咚.一番学习归来,在进行OpenCV的时候,还是要用到这个C++.几次琢磨,终于能够配置好相关的开发环境和问题初步处理,有些内容得赶快记录下来 ...

  10. 关于mongoldb 启动时显示 add already in use

    1 .不要在国内网上查找 浪费时间 2. stack over flow 是个不错的选择 进入正题. 终端输入: ps wuax | grep mongo 会看到: 随后:kill 447