JS实现倒计时和文本滚动的例子

本文介绍了JS实现倒计时和文本滚动的方法。分享给大家参考。具体实现方法如下：

注意：一般在一些淘宝店铺中，我们会看到一些像竞价这样的活动，从中我们有时会发现一些倒计时效果，在一些年会等场合中，我们也会发现一些抽奖活动，从中我们也可以看到一些滚动效果。这里分享一个实现倒计时和文字滚动的方法，希望对大家有所帮助。这主要是通过js实现的。

一、倒计时效果的实现

前台部分的完整代码如下：复制代码如下： html xmns=' 3358www.w3.org/1999/XHTML' head runat=' server ' meta http-equiv=' content-type ' content=' text/html；Charset=utf-8'/title倒计时效果的实现/title/head dyform runat=' server ' div id=' timer '正在计算中。/div脚本类型=' text/JavaScript ' var I=0；函数time to (DD，nowtstr) {var t=newdate (DD)，//获取指定时间内的总毫秒数n=(newdate (nowtstr))-(-100 * I)，//获取当前毫秒数c=t-n；//获取时间差if (c=0) {//如果差值小于等于0，即过期或刚刚过期，那么程序document.getelementbyid ('timer ')。innerhtml=“活动已结束”将被推出；clearInterval(窗口[' TTT '])；//清除定时器返回；//end execution } var ds=60 * 60 * 24 * 1000，//一天多少毫秒d=parseInt(c/ds)，//将总毫秒数除以一天的毫秒数，得到差天数h=parseInt((c-d * ds)/(3600 * 1000))。//然后取天数后剩余的毫秒数除以每小时的毫秒数得到小时数m=parsent((C-D * DS-H * 3600 * 1000)/(60 * 1000))//减去天数和小时数的毫秒数再除以每分钟的毫秒数得到分钟数s=parsent//得到最后剩余的毫秒数除以1000就是秒，剩余的毫秒数可以作为document.getelementbyid ('timer ')自动忽略。inner html=' p style=' margin-top :5 px；d '天' h '小时' m '分钟'秒/p '；//最后用ID定时器将固定格式的字符串更新为div}(function(){ window[' TTT ']=setInterval(function(){//var timetr=' %=EndTimeStr % '；//这里，活动截止时间可以从后台传输到前台。注意‘yyyy-MM-DD’的格式。//var now tstr=' %=now time str % '；//同样，当前时间可以从后台传输到前台。请注意，应该是“yyyy-MM-dd”格式的var timetr=' 2013-10-21 '；//在这里还可以自定义结束时间var nowtstr='2013-08-23 '格式为' yyyy-MM-DD '；//还可以自定义当前时间if (timestr！=' '){ TiME to(TiME tr，now tstr)；//定义倒计时时间差，注意格式} }，100)；//定义定时器，每100ms计算更新div的显示，即1秒})()；/脚本/表单/正文/html

补充：倒计时效果：简化版副本代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/标题实现倒计时简化版效果/标题/头像

bodyform runat='server '表边框=' 1 ' trth id=' day ' width=' 100 '/thth id=' day 2 ' width=' 100 '/thth id=' day 3 ' width=' 100 '/thth id=' day 4 ' width=' 100 '/th/tr/tablescript type=' text/JavaScript '函数timetr(){ var c=Date。解析(' 2014-11-11 ')-日期。分析(((new Dateif(c=0) { alert('活动已经结束');clearInterval(aa)；//清除定时器} var ds=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=' p style=' margin-top :5 px；d天/p '；document.getElementById('day2 ').innerHTML=' p style=' margin-top :5 px；'h时/p '；document.getElementById('day3 ').innerHTML=' p style=' margin-top :5 px；“m”分/p '文档。getelementbyid('第4天').innerHTML=' p style=' margin-top :5 px；s秒/p ' } var aa=setInterval(timetr，1000)；/脚本/表单

/body/html

最终我们可以看到类似于如下图所示的效果：

二、文字滚动效果的实现

前台代码部分如下：复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head runat=' server ' meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title文字滚动效果的实现/title脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js /脚本脚本类型=' text/JavaScript '函数TiME to(DD){ document。GetElementByID(' TextBox 1 ').值=dd/最后这里将固定格式的字符串更新到身份为文本框一的文本框中}

$(function(){ window[' TTT ']=SetInterval(AAA，100)；//页面加载的时候执行});

函数stop interval(){ clearInterval(窗口[' TTT '])；//清除计时器window[' TTT ']=' '；var aa='张三，李四，王五，赵六，孙七，胡八，曾九，刘十，伊一，朴二；var arr=aa.split('，')；var rdd=9 *数学。random()；var leth=数学。回合(rdd)；var leths=arr[leth].toString()；文件。getelementbyid(' textbox 1 ').value=leths}函数aaa() { var aa='张三，李四，王五，赵六，孙七，胡八，曾九，刘十，伊一，朴二；var arr=aa.split('，')；var rdd=9 *数学。random()；var leth=数学。回合(rdd)；var leths=arr[leth].toString()；时间表函数TimeTo 2(){ if(window[' TTT ']==' '){ window[' TTT ']=setInterval(AAA，100)；} }/script/head dyform runat=' server '输入类型=' text ' id=' textbox 1 '/输入类型=' button '值='开始抽奖onClick=' TiME O2()；/input type='button' value='获取幸运观众onClick=' stop interval()；//表单/正文/html最终实现的效果图如下：

知识补充：

var myDate=new Date()；我的约会对象。getyear()；//获取当前年份(2位)我的日期。getfull year()；//获取完整的年份(4位，1970-?)我的日期。getmonth()；//获取当前月份(0-11,0代表一月)我的日期。getdate()；//获取当前日我的约会对象。getday()；//获取当前星期X(0-6，0代表星期天)我的日期。gettime()；//获取当前时间（从1970.1.1开始的毫秒数)我的日期。gethours()；//获取当前小时数(0-23)我的约会。getminutes()；//获取当前分钟数(0-59)我的约会。getseconds()；//获取当前秒数(0-59)我的日期。得到毫秒();//获取当前毫秒数(0-999)我的日期。tolocaledatestring()；//获取当前日期var mytime=mydate。tolocalitemstring()；//获取当前时间我的约会对象。tolocalesting()；//获取日期与时间

希望本文所述对大家基于射流研究…的网程序设计有所帮助。