2013-02-20 39 views
0

我基本上对我的一个网站使用了javascript倒计时,它包含我需要的一切,但是我想扩展它,但是我对js比较新。基本上,倒计时完成后会显示一条消息,但是我希望在倒计时时显示一条消息,倒计时到达0时倒计时。Javascript Countdown changes

例如:“新年,{倒计时} “所以新年文本和倒数计时器在达到0时被删除,并用完成的文本替换掉。

这里是我使用的脚本:

<script language="JavaScript"> 
TargetDate = "January/01/2014 12:00 am"; 
BackColor = ""; 
ForeColor = "#000"; 
CountActive = true; 
CountStepper = -1; 
LeadingZero = true; 
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; 
FinishMessage = "<span class='finish'>Finished!</span>"; 
</script> 
<script language="javascript"> 
function calcage(secs, num1, num2) { 
    s = ((Math.floor(secs/num1))%num2).toString(); 
    if (LeadingZero && s.length < 2) 
    s = "0" + s; 
    return "<span class='digit'>" + s + "</span>"; 
} 

function CountBack(secs) { 
    if (secs < 0) { 
    document.getElementById("cntdwn").innerHTML = FinishMessage; 
    return; 
    } 
    DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000)); 
    DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24)); 
    DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60)); 
    DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60)); 

    document.getElementById("cntdwn").innerHTML = DisplayStr; 
    if (CountActive) 
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod); 
} 

function putspan(backcolor, forecolor) { 
document.write("<span id='cntdwn' style=' font-weight:bold; background-color:" + backcolor + 
       "; color:" + forecolor + "'> </span>"); 
} 

if (typeof(BackColor)=="undefined") 
    BackColor = "white"; 
if (typeof(ForeColor)=="undefined") 
    ForeColor= "black"; 
if (typeof(TargetDate)=="undefined") 
    TargetDate = "12/31/2020 5:00 AM"; 
if (typeof(DisplayFormat)=="undefined") 
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; 
if (typeof(CountActive)=="undefined") 
    CountActive = true; 
if (typeof(FinishMessage)=="undefined") 
    FinishMessage = ""; 
if (typeof(CountStepper)!="number") 
    CountStepper = -1; 
if (typeof(LeadingZero)=="undefined") 
    LeadingZero = true; 


CountStepper = Math.ceil(CountStepper); 
if (CountStepper == 0) 
    CountActive = false; 
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990; 
putspan(BackColor, ForeColor); 
var dthen = new Date(TargetDate); 
var dnow = new Date(); 
if(CountStepper>0) 
    ddiff = new Date(dnow-dthen); 
else 
    ddiff = new Date(dthen-dnow); 
gsecs = Math.floor(ddiff.valueOf()/1000); 
CountBack(gsecs); 
</script> 

在获得任何帮助,这将不胜感激!

谢谢:)

+0

这是一个糟糕的剧本!我会在一段时间内为你发布一个jQuery插件 – 2013-02-20 18:11:06

回答

2

我觉得这是你ansswer,借口如果我没有得到乌尔问题的权利。

DisplayFormat = "New Year in, {%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds}."; 
+0

哇,这很简单,我尝试过除了那里以外的其他地方!谢谢 :) – BB1873 2013-02-20 18:27:03

0

我看到你有一个简单的答案,但这里的,如果你想拥有它一下吸尘器的jQuery插件:http://jsfiddle.net/chrisdanek/C59hN/1/

只是内部目标与日期的元素,将被关到柜台

$('p.counter').countdownCounter({ 
    format : 'New Year in %%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds!', 
}); 

编辑:我创建了一个单独的页面插件http://cou.io/code/countdown/增加了几个选项。