2015-07-02 4 views
2

Как сделать счет в реальном времени с помощью Javascript?

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Count up</title> 
 
</head> 
 
<body> 
 

 

 

 
<h1>number 1</h1> 
 
<div id="counter"></div> 
 

 
<br> 
 

 
<h1>number 2</h1> 
 
<div id="counter_2"></div> 
 

 

 

 

 
<script> 
 

 
    var START_DATE = new Date("July 2, 2015 11:00:00"); // put in the starting date here 
 
    var INTERVAL = 0.366; // in seconds 
 
    var INCREMENT = 1; // increase per tick 
 
    var START_VALUE = 7325698160; // initial value when it's the start date 
 
    var count = 0; 
 

 
    window.onload = function() 
 
    { 
 
     var msInterval = INTERVAL * 1000; 
 
     var now = new Date(); 
 
     count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
     document.getElementById('counter').innerHTML = count; 
 
     setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = count;", msInterval); 
 
    } 
 

 

 

 

 
    var START_DATE_2 = new Date("July 2, 2015 11:00:00"); // put in the starting date here 
 
    var INTERVAL_2 = 0.366; // in seconds 
 
    var INCREMENT_2 = 1; // increase per tick 
 
    var START_VALUE_2 = 738160; // initial value when it's the start date 
 
    var count_2 = 0; 
 

 
    window.onload = function() 
 
    { 
 
     var msInterval = INTERVAL_2 * 1000; 
 
     var now = new Date(); 
 
     count_2 = parseInt((now - START_DATE_2)/msInterval) * INCREMENT_2 + START_VALUE_2; 
 
     document.getElementById('counter_2').innerHTML = count; 
 
     setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval); 
 
    } 
 
</script> 
 

 
</body> 
 
</html>

я это прикинь, он работал хорошо только для одного номера. Однако, когда я связывал, чтобы добавить больше, это не сработало очень хорошо. Он просто отображает вторую функцию. Кто-нибудь может мне помочь? Большое спасибо!!!!

+1

второго рода переопределение первого? –

ответ

2

Вы перезаписываете обработчик window.onload со вторым. Если вы хотите asssign нескольких обработчиков событий для тех же событий используют addEventListener метод:

window.addEventListener('load', function() { 
    var msInterval = INTERVAL_2 * 1000; 
    var now = new Date(); 
    count_2 = parseInt((now - START_DATE_2)/msInterval) * INCREMENT_2 + START_VALUE_2; 
    document.getElementById('counter_2').innerHTML = count; 
    setInterval("count_2 += INCREMENT_2; document.getElementById('counter_2').innerHTML = count_2;", msInterval); 
}); 
+0

Спасибо! Но я новичок в js, поэтому я точно не знаю, как это сделать. Не могли бы вы написать для меня пример? –

+0

Большое спасибо. У меня есть другой вопрос: как добавить запятую к отображаемому номеру? Например: 122,343,345 –

+0

Проверьте некоторые из этих ответов: [this] (http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) или [this] (http://stackoverflow.com/questions/16902924/javascript-number-formatting-with-commas) – dfsq

Смежные вопросы