Как создать тикающие часы JS?

Question

[Joiromay]

У меня есть код часов:

const timeElement = document.querySelector('.time');

const tick = () => {
    const now = new Date();
    const hours = now.getHours();
    const min = now.getMinutes();
    const sec = now.getSeconds();

        timeElement.textContent = `${hours}:${min}:${sec}`;
    
}

tick();

setInterval(tick, 1000);

Нужно сделать так чтобы двоиточие на секунду появлялось и пропадало. Помогите пожалуйста.

Comments

[iBird Rose]

ну если в лоб решение, то

let dots = ' ';
    
    if (sec % 2) {
    	dots = ':';
    } else {
    	dots = ' ';
    }

    timeElement.textContent = `${hours}:${min}${dots}${sec}`;

p.s. может кто красивее подскажет)

Answer 1

[Сергей Соколов]

Таймеры в JS не точны, поэтому лучше вызывать tick() почаще. Скажем, 10 раз в секунду.
Мигание лучше сделать полный цикл за секунду: чтобы и появлялось и гасло двоеточие каждую секунду:
Замедленный вариант через секунду закомменчен.

Comments

[Joiromay]

Спасибо! Очень понравился ваш вариант реализации моего вопроса!

Answer 2

[Rsa97]

const colon = sec % 2 === 0 ? ':' : ' ';
timeElement.textContent = `${hours}${colon}${min}${colon}${sec}`;

Answer 3

[Дмитрий]

https://codepen.io/alex922/pen/XWgxdRq
На CSS. Можно настроить анимацию, цвет и прочее...