我有一个很好的倒计时，但是我在同一页面上需要它的多个实例的阶段。我在网上找到的脚本只是简单的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>
感谢任何帮助。
答案 0 :(得分：0)
关键是将所有内容都纳入本地范围。你拥有的一切都在全球范围内，所以它只允许一个实例。您应该将所有内容包装在函数中并改为创建对象。我还使用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);
}
}