Часы в Javascript

Я сделал часы в javascript, но это статические часы. Какие изменения мне нужно сделать в следующем коде, чтобы он обновлялся каждую секунду.

<html>
<head>
    <title>Javascript Clock</title>
    <script type="text/javascript">
        function clk() {
            var a=new Date();   
            document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;

        }
    </script>
</head>

<body>
    <input type="button" onclick="clk()" value="Display Clock" />
    <p id="disp">Clock Space</p>
</body>

</html>

javascript timer clock
person sandbox    schedule 12.02.2012    source источник
comment
Взгляните на setInterval: window.onload = function(){setInterval(clk, 1000);}};   -  person Rob W    schedule 12.02.2012
comment
@RobW К чему 1000?   -  person sandbox    schedule 12.02.2012
comment
Его комментарий содержит ссылку на документацию по setInterval, которая отвечает на ваш вопрос.   -  person Michelle Tilley    schedule 12.02.2012
comment
@sandbox 1000 = 1000 миллисекунд = 1 секунда. Обычно он запускает функцию каждую секунду.   -  person Rob W    schedule 12.02.2012
comment
@RobW. Должен был быть ответ ...   -  person gdoron is supporting Monica    schedule 12.02.2012
comment
@gdoron: Хех, клянусь, я не видел комментарий Роба до того, как написал!   -  person Twisol    schedule 12.02.2012
comment
@gdoron Я знаю, но этот вопрос настолько тривиален, что мне жаль, что я разместил сообщение в комментарии и получил за него положительные голоса. Я бы предпочел найти дубликат и закрыть его для точного дублирования.   -  person Rob W    schedule 12.02.2012
comment
@RobW. Но вы ничего не нашли? знак равно   -  person gdoron is supporting Monica    schedule 12.02.2012
comment
@RobW: Как это с дубликатом? stackoverflow.com/questions/6774027/   -  person Twisol    schedule 12.02.2012
comment
возможный дубликат Как создать часы / таймер JQuery   -  person Rob W    schedule 12.02.2012
comment
Дубликат содержит основное решение: используйте setInterval для периодического запуска некоторого кода.   -  person Rob W    schedule 12.02.2012

Ответы (5)


arrow_upward
6
arrow_downward

Вы можете использовать setInterval для запуска вашей функции clk () каждую секунду:

setInterval(clk, 1000); // run clk every 1000ms

MDN на setInterval

Как указывает nnnnnn, интервал таймера, вероятно, не будет синхронизирован с прохождением фактической секунды в реальном времени, поэтому использование интервала, такого как 100 мс, может быть неплохой идеей.

person Twisol    schedule 12.02.2012
comment
Примечание: вы можете обнаружить, что часы работают более плавно, если вы обновляете чаще, чем один раз в секунду, скажем, каждые 100 мс, потому что интервал таймера не гарантированно будет точным. - person nnnnnn; 12.02.2012
comment
@nnnnnn: Замечательное наблюдение! Я включил это в свой ответ. :) - person Twisol; 12.02.2012

arrow_upward
0
arrow_downward

Вы можете добавить setTimeout(clk,1000); в свою функцию, как показано ниже:

function clk() {
        var a=new Date();   
        document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;
        setTimeout(clk,1000);
    }
person 姚先进    schedule 12.02.2012

arrow_upward
0
arrow_downward

setTimeout, предложенный в нескольких ответах, не является правильным ответом. setTimeout и setInterval могут выглядеть одинаково, но setTimeout предназначен для одиночных событий, а setInterval - для повторяющихся событий, как часы.

Итак, setInterval - правильный ответ, но сообщение Twisol предлагает только половину решения. Функция setInterval запускает таймер при загрузке страницы, но вы также должны останавливать таймер при загрузке другой страницы. Если вы этого не сделаете, то каждый раз, когда вы снова загружаете страницу с часами, запускается новый таймер, в то время как старые все еще хранятся в вашем браузере.

<body onLoad="startTimer();" onUnload="stopTimer();">

Когда вы запускаете таймер, функция setTimeout возвращает идентификатор таймера, который вы передаете в качестве аргумента для функции clearTimeout:

var intervalID;
function startTimer() {
  intervalID = window.setInterval(updateDateAndTime, 200);
}

function stopTimer() {
  window.clearInterval(intervalID);
}


nnnnnn касается частоты обновления. Однако имейте в виду, что функция полного обновления может не выполняться 10 раз в секунду. Моя функция часов, например, считывает файлы cookie с настройками часов. Вы не хотите читать куки 10 раз в секунду. Более важным случаем будет вызов XMLHttpRequest. Сервер может или не может всегда отвечать в течение 100 мс.
Для этих ситуаций я обычно создаю счетчик тиков, который увеличивается каждый раз при вызове функции updateDateAndTime и сбрасывается, когда, например, достигается 100. Это означает, что счетчик тиков сбрасывается каждые 10 секунд. Это хорошая частота для чтения файлов cookie или отправки XMLHttpRequest. Просто сгруппируйте функции, которые не нужно запускать 10 раз в секунду, и выполняйте их каждый раз, когда счетчик тиков сбрасывается.

person stevenvh    schedule 10.12.2013
comment
технически clk может рекурсивно вызывать себя с помощью setTimeout - person OneStig; 03.11.2017
comment
Запланированный на следующую секунду часов, рекурсивный setTimeout более точен и менее ресурсоемок, чем setInterval на каждую долю секунды. - person denis hebert; 05.04.2021

arrow_upward
0
arrow_downward

Цифровые часы JavaScript из системного времени также можно установить вручную. :-)

 function timer(h,m,s){

 var sec; 
 var min; 
 var hrs; 
 var day;

 if(((s<=59) && (s>=0)) && ((m<=59) && (m>=0)) && ((h<=23) && (h>=0))){

 sec=s; 
 min=m; 
 hrs=h;

 //set parent element id 'lga' to your id 

 var parent = document.getElementById('lga'); 
 parent.innerHTML = '';
 var child = document.createElement('div'); 
 child.id = "thanesh";
 child.style = 'font-size:20px'; 
 parent.appendChild(child);

 setInterval(function(){ 

 sec++;

 if(sec==60){sec=0;min++;}
if(min==60){min=0;hrs++;}
if(hrs==24){hrs = 0; min = 0; sec = 0;}

if(hrs<=12){
day = 'AM';
}else{
day = 'PM';
}

document.getElementById('thanesh').innerHTML = '<table style="background-color:#f5f5f5;"><tr><td><div id="hh">0</div><td>'
                       +hrs+' : <td><div id="mm">0</div><td>'
                       +min+' : <td><div id="ss">0</div><td>'
                       +sec+' <td>'

                       +day+'</td></td></td></td></td></td></td></tr></table>';
if(sec>9){
document.getElementById('ss').style.display = "none";
}else if(sec==0){
document.getElementById('ss').style.display = "block";
}

if(min>9){
document.getElementById('mm').style.display = "none";
}else if(min==0){
document.getElementById('mm').style.display = "block";
}

if(hrs>9){
document.getElementById('hh').style.display = "none";
}else if(hrs==0){
document.getElementById('hh').style.display = "block";
}

},
1000);

}else{
alert("Check time inputs...!");
}
}

//Set Hour, Minutes, Seconds by JS / manually

var date = new Date();

var hst = date.getHours();
var mst = date.getMinutes();
var sst = date.getSeconds();

timer(hst,mst,sst);
person Community    schedule 14.11.2018
comment
Пожалуйста, объясните это немного - person Lithilion; 14.11.2018
comment
четко укажите, какую часть вы не можете понять? Я устанавливаю системное время на функцию таймера и обычное вычисление h: m: s, устанавливаемое между условиями часов. это увеличит значение переменной с помощью элемента show hide. - person ; 21.11.2018

arrow_upward
0
arrow_downward

Поскольку ваше обновление каждой секунды реальных часов конкурирует с другими компьютерными задачами, задержка перед следующим тиком реальных часов будет меньше 1000 мс очень часто. Так что лучше использовать setTimeout вместо setInterval. Фактически, нам просто нужно немного повернуть конец отклоненного решения 姚 先进 здесь вокруг, в результате в:

function clk() {
        var a=new Date();   
        document.getElementById("disp").innerHTML=a.getHours() + ":" + a.getMinutes() + ":" + a.getSeconds() ;
        setTimeout(clk, 1000 - a % 1000);
    }

Это мои часы с 2007 года.

person denis hebert    schedule 31.12.2020