一页多次倒计时

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

关键是将所有内容都纳入本地范围。 你拥有的一切都在全球范围内，所以它只允许一个实例。 您应该将所有内容包装在函数中并改为创建对象。 我还使用了setInterval而不是setTimeOut 。 最后，你想对现有的HTML容器进行操作而不是制作html（你可以使用document.write创建一个动态容器并将其写入页面）。

jsFiddle演示： http ： //jsfiddle.net/4dh6a5ky/2/

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);
            }
    }