Javascript count up timer modification

我终于找到一个不错的javascript计数器，没有多余的计时器。我想用不同的初始时间启动计时器的多个实例。到目前为止，我所取得的唯一进展是打破剧本。Javascript count up timer modification

<!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>

来源

2012-01-16 rd42

该代码将在每次按下按钮时，增加一个新的柜台到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分钟键式启动加入定时器。

来源

2012-01-16 23:49:01 jfriend00

这真棒！我从来没有见过编辑这个小提琴。方便的工具。并感谢您的答案！干杯。 – rd42 2012-01-17 00:13:35

如果您愿意，也可以用多个计数器预填充您的页面。 CountUp函数接受一个日期对象参数作为其计数的日期。 new Date()将始终返回当前时间。在下面的示例中，我只创建了几个<div>元素，并实例化了几个具有不同日期的函数。我所做的改变处于最底层。

<!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>

来源

2012-01-17 00:22:29 pseudosavant

Javascript count up timer modification

回答

相关问题