Форум

dda_add · #1 (**permalink**) 07.11.2018, 23:51

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

рони · #2 (**permalink**) 08.11.2018, 00:08

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

dda_add · #3 (**permalink**) 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);

рони · #4 (**permalink**) 08.11.2018, 00:34

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

рони · #5 (**permalink**) 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 · #6 (**permalink**) 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>

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

Форум

Справочник

Discord чат

Курсы javascript