Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Написать часы на js (https://javascript.ru/forum/events/75805-napisat-chasy-na-js.html)

dda_add 07.11.2018 23:51

Написать часы на js
 
Нужно написать часы в формате hours:minutes:seconds через js и добавить их в spanы в html . Перерисовка не реже чем раз в секунду. ДАННЫЕ НЕ ПЕРЕРИСОВЫВАТЬ , ЕСЛИ ОНИ НЕ ПОМЕНЯЛИСЬ. То есть, если меняются только секунды, то перерисовываем только span с секундами,а spanы с часами и минутами не трогаем.

рони 08.11.2018 00:08

dda_add,
где ваши попытки?

dda_add 08.11.2018 00:26

есть обычные часы, а по поводу перерисовки пока что не могу ничего толкового придумать

function time(){
    var date = new Date(); 
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    function setZero(time) {
        return (time < 10) 
        ? '0' + time
        : time; 
        } 
    document.getElementById('hours').innerHTML = hours;
    document.getElementById('minutes').innerHTML = setZero(minutes);
    document.getElementById('seconds').innerHTML = setZero(seconds);
}
time();
setInterval(`time()`,1000);

рони 08.11.2018 00:34

dda_add,
а проверить что есть в innerHTML ?

рони 08.11.2018 00:53

dda_add,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<span id="hours"></span>
<span id="minutes"></span>
<span id="seconds"></span>
 <script>
function up(id, value)
{
   var el = document.getElementById(id);
   if(el.innerHTML != value) el.innerHTML = value
}
function setZero(time) {
        return (time < 10)
        ? '0' + time
        : time;
        }
function time(){
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    up('hours', hours);
    up('minutes', setZero(minutes));
    up('seconds', setZero(seconds));
    requestAnimationFrame(time);
}
time();


  </script>
</body>
</html>

j0hnik 08.11.2018 02:36

<div id="time">
	<span></span>:<span></span>:<span></span>
</div>
	<script>
var sp = document.querySelectorAll('#time span');
		(t=()=>{
			 new Date().toString().slice(15,24).split(':').forEach((d,i)=>{
			if(sp[i].textContent != d) sp[i].textContent = d;
		});
			setTimeout(t,1000);
		})();
	</script>

Для разнообразия


Часовой пояс GMT +3, время: 01:29.