Изменения обратного отсчета Javascript

Question

Я использую обратный отсчет javascript для одного из моих сайтов, он содержит все, что мне нужно, однако я хочу расширить его, но я относительно новичок в js. В принципе, он показывает сообщение после завершения обратного отсчета, которое отлично, однако я хочу показать сообщение вместе с обратным отсчетом, который удаляется с обратным отсчетом, когда он достигнет 0.

Пример: «Новый год в, {Обратный отсчет] «поэтому текст нового года вместе с обратным отсчетом следует удалить, когда он достигнет 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> 

Любая помощь в получении этого было бы весьма признателен!

Спасибо :)

Answer 1

Я думаю, что это ваш ansswer, извините если я не получить ур вопрос правильно.

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

Answer 2

Я вижу, что у вас есть простой ответ, но вот JQuery плагин, если вы хотите, чтобы это немного чище: http://jsfiddle.net/chrisdanek/C59hN/1/

Просто предназначаться элемент с датой внутри и будет включен в счетчике

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

Edit: Я создал отдельную страницу для плагина http://cou.io/code/countdown/ и добавил несколько вариантов.