JS实现倒计时和文字滚动的效果实例
本文实例讲述了JS实现倒计时和文字滚动效果的方法。分享给大家供大家参考。具体实现方法如下：
说明：一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动，从中我们时而会发现一些倒计时的效果，在一些年会等场合我们也会发现一些抽奖活动，从中我们也可以看到一些随即滚动的效果。这里给大家分享一种实现倒计时和文字滚动的方法，希望可以对大家有所帮助。这里主要是通过js实现的。
一、倒计时效果的实现
前台部分的完整代码如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>倒计时效果的实现</title>
</head>
<body>
<formrunat="server">
<divid="timer">计算中。。。</div>
<scripttype="text/javascript">
vari=0;
functionTimeTo(dd,nowtstr){
vart=newDate(dd),//取得指定时间的总毫秒数
n=(newDate(nowtstr))-(-100*i),//取得当前毫秒数
c=t-n;//得到时间差
if(c<=0){//如果差小于等于0 也就是过期或者正好过期，则推出程序
document.getElementById('timer').innerHTML='活动已经结束';
clearInterval(window['ttt']);//清除计时器
return;//结束执行
}
vards=60*60*24*1000,//一天共多少毫秒
d=parseInt(c/ds),//总毫秒除以一天的毫秒得到相差的天数
h=parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时
m=parseInt((c-d*ds-h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数
s=parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000); //得到最后剩下的毫秒数除以1000就是秒数，再剩下的毫秒自动忽略即可
document.getElementById('timer').innerHTML='<pstyle="margin-top:5px;"><b>'+d+'</b>天<b>'+h+'</b>小时<b>'+m+'</b>分<b>'+s+'</b>秒</p>';//最后这里将固定格式的字符串更新到ID为timer的div中
i++;
}
(function(){
window['ttt']=setInterval(function(){
// vartimestr="<%=EndTimeStr%>";//这里可以通过后台向前台传递活动截止时间，注意要是"yyyy-MM-dd"这个格式的
// varnowtstr="<%=NowTimeStr%>";//同样这里也可以通过后台向前台传递当前时间，注意也要是"yyyy-MM-dd"这个格式的
vartimestr="2013-10-21";//这里也可以自定义"yyyy-MM-dd"这个格式的截至活动时间
varnowtstr="2013-08-23";//这里也可以自定义"yyyy-MM-dd"这个格式的当前时间
if(timestr!=""){
TimeTo(timestr,nowtstr);//定义倒计时的相差时间，注意格式
}
},100);//定义计时器，每隔100毫秒也就是1秒计算并更新div的显示
})();
</script>
</form>
</body>
</html>
补充：倒计时效果精简版:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>倒计时精简版效果的实现</title> </head>
<body> <formrunat="server"> <tableborder="1"> <tr> <thid="day"width="100"></th> <thid="day2"width="100"></th> <thid="day3"width="100"></th> <thid="day4"width="100"></th> </tr> </table> <scripttype="text/javascript"> functiontimestr() { varc=Date.parse("2014-11-11")-Date.parse((newDate())); if(c<=0) { alert('活动已经结束'); clearInterval(aa);//清除定时器 } vards=60*60*24*1000,//一天共多少毫秒 d=parseInt(c/ds),//总毫秒除以一天的毫秒得到相差的天数 h=parseInt((c-d*ds)/(3600*1000)),//然后取完天数之后的余下的毫秒数再除以每小时的毫秒数得到小时 m=parseInt((c-d*ds-h*3600*1000)/(60*1000)),//减去天数和小时数的毫秒数剩下的毫秒，再除以每分钟的毫秒数，得到分钟数 s=parseInt((c-d*ds-h*3600*1000-m*60*1000)/1000); //得到最后剩下的毫秒数除以1000就是秒数，再剩下的毫秒自动忽略即可 document.getElementById('day').innerHTML='<pstyle="margin-top:5px;"><b>'+d+'</b>天</p>'; document.getElementById('day2').innerHTML='<pstyle="margin-top:5px;"><b>'+h+'</b>时</p>'; document.getElementById('day3').innerHTML='<pstyle="margin-top:5px;"><b>'+m+'</b>分</p>' document.getElementById('day4').innerHTML='<pstyle="margin-top:5px;"><b>'+s+'</b>秒</p>' } varaa=setInterval(timestr,1000); </script> </form>
</body> </html>