複数のインスタンスを使用するとカウントダウンの競合が発生する

Question

カウントダウンがきれいになっていますが、同じページに複数のインスタンスが必要な段階です。私が使用しているスクリプトはオンラインで見つかっただけで、ストレートなJavaScriptですが、JavaScriptはあまり良くありませんので、どのように修正して各カウンタをユニークにするかわかりません。

はJavaScript：

function calcage(secs, num1, num2) { 
    s = ((Math.floor(secs/num1))%num2).toString(); 
    if (LeadingZero && s.length < 2) 
    s = "0" + s; 
    return "<b>" + s + "</b>"; 
} 

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='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 language="JavaScript"> 
TargetDate = "$variable"; 
BackColor = "palegreen"; 
ForeColor = "navy"; 
CountActive = true; 
CountStepper = -1; 
LeadingZero = true; 
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; 
FinishMessage = "It is finally here!"; 
</script> 

すべてのヘルプは高く評価されます。

Answer 1

キーは、すべてをローカルスコープに入れることです。あなたが持っているものはすべてグローバルスコープにあるので、1つのインスタンスのみが許可されます。関数内のすべてをラップし、代わりにオブジェクトを作成する必要があります。 setTimeOutの代わりにsetIntervalも使用しました。最後に、既存のHTMLコンテナでhtmlを作ってはいけません（document.writeは動的コンテナを作成し、それをページに書き出します）。

View Demo

HTML：

<!-- container 1 for a timer --> 
<div id="time1"></div> 
<!-- container 2 for a timer --> 
<div id="time2"></div> 
<script src="/js/script.js"></script> 
<script language="JavaScript"> 
// Create instance of your countdown with it's own settings 
var counterOne = new CountDown({ 
    // This is the id name for the container (<div id="time1"></div>) 
    send_to:'time1', 
    forecolor:'red', 
    targetdate:'09/22/2016 9:39 AM' 
}); 
// Create instance #2 with it's own settings 
var counterTwo = new CountDown({ 
    // This is the id name for the container (<div id="time2"></div>) 
    send_to:'time2', 
    forecolor:'blue', 
    targetdate:'09/22/2016 9:40 AM' 
}); 
// Apply the creation method 
// Without .create(), nothing will happen since all the working 
// script to apply the counter is in this method 
counterOne.create(); 
counterTwo.create(); 
</script> 

/js/script.js：

var CountDown = function(data) 
    { 
     // Assign this object 
     var thisObj = this; 
     // Make sure all settings are not left undefined 
     data.send_to  = (typeof data.send_to === "undefined")? "time1" : data.send_to; 
     data.backcolor  = (typeof data.backcolor === "undefined")? "white" : data.backcolor; 
     data.forecolor  = (typeof data.forecolor === "undefined")? "black" : data.forecolor; 
     data.targetdate  = (typeof data.targetdate === "undefined")? "12/31/2020 5:00 AM" : data.targetdate; 
     data.displayformat = (typeof data.displayformat === "undefined")? "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds." : data.displayformat; 
     data.countactive = (typeof data.countactive === "undefined")? true : data.countactive; 
     data.message  = (typeof data.message === "undefined")? "Ended" : data.message; 
     data.countstepper = (typeof data.countstepper != "number")? -1 : data.countstepper; 
     data.leadingzero = (typeof data.leadingzero === "undefined")? true : data.leadingzero; 
     // Get DOM object 
     var domObj   = document.getElementById(data.send_to); 

     this.calcage = function(secs, num1, num2) 
      { 
       var s = ((Math.floor(secs/num1))%num2).toString(); 

       if(data.leadingzero && s.length < 2) 
        s = "0" + s; 

       return "<b>" + s + "</b>"; 
      } 

     this.putSpan = function(backcolor, forecolor) 
      { 
       // Modify html instead of making html 
       domObj.style.backgroundColor = backcolor; 
       domObj.style.color    = forecolor; 
      } 

     this.writeBoard = function(secs,countDownEngine) 
      { 
       if(secs <= 0) { 
        clearInterval(countDownEngine); 
        domObj.innerHTML = data.message; 
        return; 
       } 

       var DisplayStr  = ''; 
       DisplayStr   = data.displayformat.replace(/%%D%%/g, thisObj.calcage(secs,86400,100000)); 
       DisplayStr   = DisplayStr.replace(/%%H%%/g, thisObj.calcage(secs,3600,24)); 
       DisplayStr   = DisplayStr.replace(/%%M%%/g, thisObj.calcage(secs,60,60)); 
       DisplayStr   = DisplayStr.replace(/%%S%%/g, thisObj.calcage(secs,1,60)); 
       domObj.innerHTML = DisplayStr; 
      } 

     this.create = function() 
      { 
       data.countstepper = Math.ceil(data.countstepper); 

       if(data.countstepper == 0) 
        data.countactive = false; 

       var SetTimeOutPeriod = ((Math.abs(data.countstepper)-1)*1000) + 990; 

       thisObj.putSpan(data.backcolor, data.forecolor); 

       var dthen = new Date(data.targetdate); 
       var dnow = new Date(); 
       var nowCalc = (data.countstepper > 0)? (dnow-dthen) : (dthen-dnow); 
       var ddiff = new Date(nowCalc); 
       var gsecs = Math.floor((ddiff.valueOf()/1000)); 

       var countDownEngine = setInterval(function() { 
        gsecs = gsecs+data.countstepper; 
        thisObj.writeBoard(gsecs,countDownEngine); 
       }, 1000); 
      } 
    }