Javascript计数计时器修改答案

【问题标题】：Javascript count up timer modificationJavascript计数计时器修改
【发布时间】：2012-01-16 23:01:04
【问题描述】：

我终于找到了一个不错的 JavaScript 倒计时计时器。我想以不同的初始时间启动计时器的多个实例以进行计数。到目前为止，我取得的唯一进展是打破了剧本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
/**********************************************************************************************
* CountUp script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-countup-timer/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function CountUp(initDate, id){
    this.beginDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;
    this.updateNumOfDays();
    this.updateCounter();
}

CountUp.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
    var self = this;
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}

CountUp.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}

CountUp.prototype.calculate=function(){
    var currDate = new Date();
    var prevDate = this.beginDate;
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}

CountUp.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}

CountUp.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}

CountUp.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML =
        "<strong>" + this.days + "</strong> " +
        "<strong>" + this.hours + "</strong>:" +
        "<strong>" + this.minutes + "</strong>:" +
        "<strong>" + this.seconds + "</strong>";
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}

window.onload=function(){ new CountUp(new Date(), 'counter'); }

</script>
</head>
<body>
<div id="counter">Contents of this DIV will be replaced by the timer</div>
</body>
</html>

【问题讨论】：

标签： javascript date timer counter

【解决方案1】：

每次按下按钮时，此代码都会在您的 HTML 中添加一个新计数器：

var counterNum = 1;    

function addCounter() {
    var div = document.createElement("div");
    div.id = "counter" + counterNum++;
    document.body.appendChild(div);
    var x = new CountUp(new Date(), div.id);
}

按钮的 HTML 代码：

<button onclick="addCounter()">Add Counter</button>

在此处查看工作演示：http://jsfiddle.net/jfriend00/NshSf/。

或者，如果你想要不同的初始时间，你可以这样设置初始时间：

 new CountUp(new Date() - (10*60*60*1000), div.id);   // start 10 minutes ago (time in ms)

您可以see here 使用此代码，通过按下按钮添加的计时器从 10 分钟开始。

【讨论】：

太棒了！！！我从未见过编辑这个小提琴。方便的工具。也感谢您的回答！干杯。

【解决方案2】：

如果您愿意，您也可以使用多个计数器预先填充您的页面。 CountUp 函数接受一个日期对象参数来表示它正在计数的日期。 new Date() 将始终返回当前时间。在下面的示例中，我刚刚创建了更多<div> 元素并实例化了更多具有不同日期的CountUp 函数。我所做的更改在底部。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JavaScript CountUp Timer - Praveen Lobo</title>
<script type="text/javascript">
/**********************************************************************************************
* CountUp script by Praveen Lobo (http://PraveenLobo.com/techblog/javascript-countup-timer/)
* This notice MUST stay intact(in both JS file and SCRIPT tag) for legal use.
* http://praveenlobo.com/blog/disclaimer/
**********************************************************************************************/
function CountUp(initDate, id){
    this.beginDate = new Date(initDate);
    this.countainer = document.getElementById(id);
    this.numOfDays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
    this.borrowed = 0, this.years = 0, this.months = 0, this.days = 0;
    this.hours = 0, this.minutes = 0, this.seconds = 0;
    this.updateNumOfDays();
    this.updateCounter();
}

CountUp.prototype.updateNumOfDays=function(){
    var dateNow = new Date();
    var currYear = dateNow.getFullYear();
    if ( (currYear % 4 == 0 && currYear % 100 != 0 ) || currYear % 400 == 0 ) {
        this.numOfDays[1] = 29;
    }
    var self = this;
    setTimeout(function(){self.updateNumOfDays();}, (new Date((currYear+1), 1, 2) - dateNow));
}

CountUp.prototype.datePartDiff=function(then, now, MAX){
    var diff = now - then - this.borrowed;
    this.borrowed = 0;
    if ( diff > -1 ) return diff;
    this.borrowed = 1;
    return (MAX + diff);
}

CountUp.prototype.calculate=function(){
    var currDate = new Date();
    var prevDate = this.beginDate;
    this.seconds = this.datePartDiff(prevDate.getSeconds(), currDate.getSeconds(), 60);
    this.minutes = this.datePartDiff(prevDate.getMinutes(), currDate.getMinutes(), 60);
    this.hours = this.datePartDiff(prevDate.getHours(), currDate.getHours(), 24);
    this.days = this.datePartDiff(prevDate.getDate(), currDate.getDate(), this.numOfDays[currDate.getMonth()]);
    this.months = this.datePartDiff(prevDate.getMonth(), currDate.getMonth(), 12);
    this.years = this.datePartDiff(prevDate.getFullYear(), currDate.getFullYear(),0);
}

CountUp.prototype.addLeadingZero=function(value){
    return value < 10 ? ("0" + value) : value;
}

CountUp.prototype.formatTime=function(){
    this.seconds = this.addLeadingZero(this.seconds);
    this.minutes = this.addLeadingZero(this.minutes);
    this.hours = this.addLeadingZero(this.hours);
}

CountUp.prototype.updateCounter=function(){
    this.calculate();
    this.formatTime();
    this.countainer.innerHTML =
        "<strong>" + this.days + "</strong> " +
        "<strong>" + this.hours + "</strong>:" +
        "<strong>" + this.minutes + "</strong>:" +
        "<strong>" + this.seconds + "</strong>";
    var self = this;
    setTimeout(function(){self.updateCounter();}, 1000);
}

window.onload=function(){
    var counters = [
        new CountUp(new Date(), 'counter1'), // Today
        new CountUp(new Date(2012, 0, 1), 'counter2'), // Jan 1 2012
        new CountUp(new Date(2011, 11, 25), 'counter3') // Dec 25, 2011
    ];      
}

</script>
</head>
<body>
<div id="counter1">Contents of this DIV will be replaced by the timer</div>
<div id="counter2">Contents of this DIV will be replaced by the timer</div>
<div id="counter3">Contents of this DIV will be replaced by the timer</div>
</body>
</html>

【讨论】：