JavaScript 逼真图片倒计时实现代码

更新时间：2010年09月17日 15:38:58 作者：

一般的倒计时代码都是文字版本的，这个是图片格式的，更漂亮的，图片大家可以自己做。主要是参考实现方法。

逼真的Js图片倒计时，显示剩余小时、分钟、秒数。仅用了一张图片就搞定了，与纯网页版的不太一样哦。现在用图片模拟LED的效果，还真不错，希望大家彻底喜欢哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>逼真图片倒计时</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> .time{width:200px;height:25px;border:1px red solid;overflow:hidden;} .time span{float:left;line-height:25px;height:25px;overflow:hidden;} .time span.danwei{padding:0 1px;} .clear{height:0;clear:both;overflow:hidden;} </style> </head> <body> 距离发射升空还有： <div class="time" id="time1"> <span><img id="hour_01" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span><img id="hour_02" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span><img id="hour_03" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span class="danwei">：</span> <span><img id="minute_01" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span><img id="minute_02" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span class="danwei">：</span> <span><img id="second_01" alt="" src="/upload/201009/20100917154719975.jpg"></span> <span><img id="second_02" alt="" src="/upload/201009/20100917154719975.jpg"></span> <br class="clear"> </div> <script type="text/javascript"> var overa; overa = new Date(2010, 10, 01, 00, 00);///第数日时间当时间超过999小时 var localNow = new Date(); function clock1(){ var local = new Date(); var intDiff = overa.getTime() - local.getTime(); if(intDiff <= 0){document.getElementById('time1').innerHTML = "活动已结束！";//显示活动结束 return false;} var day = Math.floor(intDiff / (1000 * 60 * 60 * 24)); var hour = Math.floor(intDiff / (1000 * 60 * 60)) - (day * 24); var hour2 = Math.floor(intDiff / (1000 * 60 * 60)); var minute = Math.floor(intDiff / (1000 * 60)) - (day * 24 * 60) - (hour * 60); var second = Math.floor(intDiff / 1000) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); if (hour2 <= 99) hour2 = '0' + hour2; if (day <= 9) day = '0' + day; if (hour2 <= 9) hour2 = '0' + hour2; if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; document.getElementById('hour_01').style.marginTop = (hour2.toString().substr(0,1)) * (-25) +'px'; document.getElementById('hour_02').style.marginTop = (hour2.toString().substr(1,1)) * (-25) +'px'; document.getElementById('hour_03').style.marginTop = (hour2.toString().substr(2,1)) * (-25) +'px'; document.getElementById('minute_01').style.marginTop = (minute.toString().substr(0,1)) * (-25) +'px'; document.getElementById('minute_02').style.marginTop = (minute.toString().substr(1,1)) * (-25) +'px'; document.getElementById('second_01').style.marginTop = (second.toString().substr(0,1)) * (-25) +'px'; document.getElementById('second_02').style.marginTop = (second.toString().substr(1,1)) * (-25) +'px'; setTimeout("clock1()", 1000); } clock1(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

图片倒计时

JAVASCRIPT 实现普通日期转换多少小时前、多少分钟前、多少秒
貌似最近很流行这个，就写了个js函数实现之
2009-05-05
javascript 日期时间函数(经典＋完善＋实用)
日期时间脚本库方法列表
2009-05-05
Javascript 倒计时源代码.(时.分.秒) 详细注释版
基于js的倒计时实现代码，并有详细的注释比较适合学习使用。
2011-05-05
农历与西历对照
这篇文章主要介绍了农历与西历对照,需要的朋友可以参考下
2006-09-09
支持IE,Firefox的javascript 日历控件
javascript 日历控件支持IE,Firefox,效果还不错，需要的朋友可以参考下，脚本之家之前曾发布多篇类似的文章，需要的朋友可以搜索下。
2009-10-10
日历控件在FF2.0，ie6下测试可用
有什么意见，提一下。偶以后改进 ps:在FF2.0，ie6下测试没问题为保证输入正确，记得给控件加个readonly
2008-06-06
javascript检查日期格式的函数[比较全]
非常全的，功能较多的日期检查函数
2008-10-10
javascript 日期常用的方法
日期的换算比较和日期的格式判断需要的朋友可以参考下。
2009-11-11
实现javascript的延期执行或者重复执行的两个函数
实现javascript的延期执行或者重复执行的两个函数...
2007-06-06
百度用到的Js日历大家可以看看
本JavaScript日历是从百度网站里整理出来的，费了很大劲，因为感觉这个日历简直太棒了，没有使用任何的外部文件，全部是HTML代码和Javascirpt实现。
2009-10-10