位置：首页>> 网络编程>> JavaScript>> js倒记时代码，自定义时间改变时间，日期到时事件，日期格式。

js倒记时代码，自定义时间改变时间，日期到时事件，日期格式。

作者：wllllll　来源：51js　发布时间：2010-08-08 08:51:00　

标签：时间,日期,倒计时

这份代码不是那种时间没有改变也输出innerHTML的高消耗代码。
innerHTML和style的改变是非常消耗游览器性能的，
如果你将来希望消耗更低，你至少要学会在需要的时候再去执行这些操作

我有那么做，所以我的代码会比别人的多一些。有一些相似的代码。你可以改写代码，让他们更精简。

注意：用户修改日期会发生的问题，我有一天突然想起这代码，我会修改他

window.ReciprocalTimer.Add({
Discern : (document.getElementById("diva")),//线程标识，他将用来判断倒记时是否重复增加，重复增加会删除旧的的倒记时。线程标识可以是任何数据类型，他是使用==来做判断的
Timer : new Date(2000,1,2,3,4,5),//倒记时的时间，他必须是new Date()的数据，不可以是Date()的数据。new Date必须写年月日，如：new Date(2000,1,2)
Format : "YY年M月D日,h时m分s秒",//数据显示格式，YYYY为完整的年号，YY的话只显示年号后两位，如果没有这些数据，那么就不会显示
onTimerChange : function(){//时间发生改变时执行,this就是这里写的Object对象，我个人使用this.Discern来输出日期显示是因为方便
//你可以使用if ( this.Timer < new Date(0, 0, 0, 0, 0, 0).getTime() + 700 ) delete ReciprocalTimer.Data[this.Id]
//来删除当前的倒记时，做出倒记时间断的效果
this.Discern.innerHTML = this.Value
},
onTimerEnd : function(){//当倒记时到0时执行的代码，当激发这个动作时，会删除当前标签监视
this.Discern.innerHTML = "到期"
}
})
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><body><div id="diva"> </div><div id="divb"> </div><div id="divc"> </div><script language="javascript">window.ReciprocalTimer = {}window.ReciprocalTimer.Id = 0window.ReciprocalTimer.ZeroTimer = new Date(0, 0, 0, 0, 0, 0).getTime() + 700//数字是为了配合setInterval线程的执行window.ReciprocalTimer.Data = {}window.ReciprocalTimer.Null = function(){}//增加一个倒记时window.ReciprocalTimer.Add = function(DaValue){ReciprocalTimer.Del(DaValue.Discern)var Data = {}Data.Discern = DaValue.DiscernData.TruthTimer = new Date().getTime()Data.Timer = (DaValue.Timer || new Date()).getTime()Data.Format = DaValue.Format || "YYYY-M-D h:m:s"Data.onTimerChange = DaValue.onTimerChange || ReciprocalTimer.NullData.onTimerEnd = DaValue.onTimerEnd || ReciprocalTimer.Nullif ( Data.ChangeId == null && Data.Format.indexOf("s") != -1 ) Data.ChangeId = "s"if ( Data.ChangeId == null && Data.Format.indexOf("m") != -1 ) Data.ChangeId = "m"if ( Data.ChangeId == null && Data.Format.indexOf("h") != -1 ) Data.ChangeId = "h"if ( Data.ChangeId == null && Data.Format.indexOf("D") != -1 ) Data.ChangeId = "D"if ( Data.ChangeId == null && Data.Format.indexOf("M") != -1 ) Data.ChangeId = "M"if ( Data.ChangeId == null && Data.Format.indexOf("Y") != -1 ) Data.ChangeId = "Y"Data.Id = ReciprocalTimer.Id++ReciprocalTimer.Data[Data.Id] = DataReciprocalTimer.Interval = ReciprocalTimer.Interval || window.setInterval("window.ReciprocalTimer.CircleInterval()", 200)}//必须根据标识来删除监视window.ReciprocalTimer.Del = function(DaDiscern){for (var Id in ReciprocalTimer.Data){if ( ReciprocalTimer.Data[Id].Discern === DaDiscern ) {delete ReciprocalTimer.Data[Id]}}}window.ReciprocalTimer.CircleInterval = function(){var IsDelInterval = falsevar HaDate = new Date()for (var Id in ReciprocalTimer.Data){IsDelInterval = truevar Data = ReciprocalTimer.Data[Id]var HaTrue = falseif ( Data.ChangeId == "s" && Data.Change != HaDate.getSeconds() ) { Data.Change = HaDate.getSeconds(); HaTrue = true }if ( Data.ChangeId == "m" && Data.Change != HaDate.getMinutes() ) { Data.Change = HaDate.getMinutes(); HaTrue = true }if ( Data.ChangeId == "h" && Data.Change != HaDate.getHours() ) { Data.Change = HaDate.getHours(); HaTrue = true }if ( Data.ChangeId == "D" && Data.Change != HaDate.getDate() ) { Data.Change = HaDate.getDate(); HaTrue = true }if ( Data.ChangeId == "M" && Data.Change != HaDate.getMonth() ) { Data.Change = HaDate.getMonth(); HaTrue = true }if ( Data.ChangeId == "Y" && Data.Change != HaDate.getYear() ) { Data.Change = HaDate.getYear(); HaTrue = true }if ( HaTrue == true ) {Data.Timer = Data.Timer - (HaDate.getTime() - Data.TruthTimer)Data.TruthTimer = HaDate.getTime()var HaTimer = new Date(Data.Timer)Data.Value = Data.FormatData.Value = Data.Value.replace(/s/g, HaTimer.getSeconds())Data.Value = Data.Value.replace(/m/g, HaTimer.getMinutes())Data.Value = Data.Value.replace(/h/g, HaTimer.getHours())Data.Value = Data.Value.replace(/D/g, HaTimer.getDate())Data.Value = Data.Value.replace(/M/g, HaTimer.getMinutes())var HaYear = HaTimer.getYear() < 2000 ? "19" + HaTimer.getYear() : HaTimer.getYear() + ""Data.Value = Data.Value.replace(/YYYY/g, HaYear)Data.Value = Data.Value.replace(/YY/g, HaYear.substr(2, 2))Data.onTimerChange.call(Data)if ( Data.Timer < ReciprocalTimer.ZeroTimer ) {Data.onTimerEnd.call(Data)delete ReciprocalTimer.Data[Id]}} }if ( IsDelInterval == false ) {window.clearInterval(ReciprocalTimer.Interval)delete ReciprocalTimer.Interval}}window.ReciprocalTimer.Add({Discern : (document.getElementById("diva")),//线程标识，他将用来判断倒记时是否重复增加，重复增加会删除旧的的倒记时。线程标识可以是任何数据类型，他是使用==来做判断的Timer : new Date(2000,1,2,3,4,5),//倒记时的时间，他必须是new Date()的数据，不可以是Date()的数据。new Date必须写年月日，如：new Date(2000,1,2)Format : "YY年M月D日,h时m分s秒",//数据显示格式，YYYY为完整的年号，YY的话只显示年号后两位，如果没有这些数据，那么就不会显示onTimerChange : function(){//时间发生改变时执行,this就是这里写的Object对象，我个人使用this.Discern来输出日期显示是因为方便//你可以使用if ( this.Timer < new Date(0, 0, 0, 0, 0, 0).getTime() + 700 ) delete ReciprocalTimer.Data[this.Id]//来删除当前的倒记时，做出倒记时间断的效果this.Discern.innerHTML = this.Value},onTimerEnd : function(){//当倒记时到0时执行的代码，当激发这个动作时，会删除当前标签监视this.Discern.innerHTML = "到期"}})window.ReciprocalTimer.Add({Discern : document.getElementById("divb"),Timer : new Date(1988,8,9,10,11,12),Format : "YYYY-M-D h:m:s",onTimerChange : function(){this.Discern.innerHTML = this.Value},onTimerEnd : function(){this.Discern.innerHTML = "到期"}})//一个只有秒的倒记时window.ReciprocalTimer.Add({Discern : document.getElementById("divc"),Timer : new Date(0,0,0,0,0,10),Format : "s秒",onTimerChange : function(){this.Discern.innerHTML = this.Value},onTimerEnd : function(){this.Discern.innerHTML = "到期"}})</script></body></html>

投稿

js倒记时代码，自定义时间改变时间，日期到时事件，日期格式。

猜你喜欢