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需再刷新一下页面才能执行]

您可能感兴趣的文章:

图片倒计时

js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
这篇文章主要介绍了js 判断所选时间(或者当前时间)是否在某一时间段,需要的朋友可以参考下
2015-09-09
正宗的日历(含农历)
正宗的日历(含农历)...
2006-09-09
JavaScript 时分秒时间代码(自动补零)
JavaScript 时分秒时间代码，时间小于10的就补充一个零。
2010-02-02
Javascript 世界时区时间显示代码
Javascript 世界时区时间显示代码，显示多个地区的时间，需要的朋友可以参考下代码
2012-05-05
javascript 当前日期加(天、周、月、年)
javascript当前日期加(天、周、月、年) ，有需要操作日期的朋友，可以参考下。
2009-08-08
显示服务器时间的在线时钟代码简单
不知道这里之前有没有这种代码。在网上找了半天也没有满意的，于是写了这段代码。实现起来很简单，不必重复读服务器时间，读一次即可。
2008-05-05
javascript倒计时效果代码，可以方便参数调用
网上看到一个js倒计时效果代码，但没能改成参数调用的，唉，好久没练了，后来在经典论坛版主caiying2007的帮助下解决了
2008-04-04
JavaScript 逼真图片倒计时实现代码
一般的倒计时代码都是文字版本的，这个是图片格式的，更漂亮的，图片大家可以自己做。主要是参考实现方法。
2010-09-09
由Javascript实现的页面日历
由Javascript实现的页面日历，学习js的朋友可以参考下。
2011-11-11
javascript获取当前日期时间及其它操作函数
javascript获取当前日期时间及其它操作函数，需要在js中操作日期时间的朋友可以参考下。整理的比较全。
2011-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具