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>