Как сделать обновление часов на js

Question

Как сделать обновление часов на js

Кристофер Морган Знаток (451), на голосовании 1 год назад

Как сделать обновление часов на js? При открытии страницы часы на странице замирают на одном времени и изменяются только при обновлении

Answer 1

удалить их и скачать заново с интернета.

Answer 2

Оберни в функцию свой код "TimeFunc" и вызывай так:

 setInterval(TimeFunc, 1000);

Или так:

Затем:

 var findclock; 
window.addEventListener('DOMContentLoaded', (event) => { 
	findclock = document.getElementById('clock'); 
	TimeFunc(); 
	setInterval(TimeFunc, 1000); 
}); 
function GetCurrentTime(){ var today = new Date();  return ('0' + today.getHours()).slice(-2)+':'+('0' + today.getMinutes()).slice(-2)+':'+('0' + today.getSeconds()).slice(-2); } 
function TimeFunc() { if(findclock) findclock.textContent = GetCurrentTime(); }

Answer 3

По принципу таймера. Делал такое - там действительно тикают секунды и минуты.
Но подвергся жесткой абструкции за этот код, мол setInterval не дает точное количество миллисекунд и такие часы через какое-то время будут отставать или спешить.
Но в теории если в переменные sec1, sec2, min1 ,min2 поместить текущие значения секунд и минут и создать еще переменные для значений часа - получатся электронные часы

  
 
 
     
    Document 
 
 
 
00: 
00

Answer 4

Самый эффективный способ создания часов, это использовать requestAnimationFrame. Ибо интервал крайне нестабильный и может сбиваться, плюс создает дополнительную и не нужную нагрузку, ибо продолжает работать при потере фокуса со страницы.

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

 (time = () => { 
 
   let d = new Date(); 
   let h = d.getHours(); 
   let m = d.getMinutes(); 
   let s = d.getSeconds(); 
 
   h = h % 100 < 10 ? '0' + h : h; 
   m = m % 100 < 10 ? '0' + m : m; 
   s = s % 100 < 10 ? '0' + s : s; 
 
   document.getElementById('clock') 
   .textContent = `${h}:${m}:${s}`; 
 
   requestAnimationFrame(time); 
 
})();

Конструкции if...else в данном случае можно значительно упростить, как и сам вывод.

Answer 5

Тебе нужно запувскать функцию обновления запуска часов через определенное время. Значит, лучший вариант, сделать это через setInterval(updateTime, 1000) где updateTime это функция которая обновляет время, а 1000 это количество милисекунд через которое функция будет запущена снова

Answer 6

https://codepen.io/norbert123/pen/YzOerBQ самое простое так