MYSQL
PHP
HTML
CSS
JS

Как вывести время на Javascript. Цифровые часы

Для начала нам потребуется получить текущее время. Для работы с датой и временем в Javascript существует объект Date. Попробуем вывести на экран текущую дату:
?
1
2
3
<script>
   alert(new Date());
</script>
Чтобы получить время в текстовом формате создадим функцию getCurrentTimeString, а для обновления результата каждую секунду используем Interval:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="time-node"></div>
 
<script>
   var timeNode = document.getElementById('time-node');
 
   function getCurrentTimeString() {
      return new Date().toTimeString().replace(/ .*/, '');
   }
 
   setInterval(
      () => timeNode.innerHTML = getCurrentTimeString(),
      1000
   );
</script>
?
1
2
3
4
5
6
7
8
9
10
<style>
#show-date{
   padding: 15px;
   background: #000;
   color: #f00;
   display: inline-block;
   font-weight: bold;
   border-radius: 4px;
}
</style>
Для получения секундного двоиточия модернизируем нашу функцию getCurrentTimeString:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="time-node"></div>
 
<script>
   var timeNode = document.getElementById('time-node');
 
   function getCurrentTimeString2(dots) {
      var timeString = new Date().toTimeString().replace(/:[0-9]{2,2} .*/, '');
      return dots ? timeString : timeString.replace(/:/, ' ');
   }
 
   setInterval(
      function() {
         timeNode.innerHTML = getCurrentTimeString(Math.round(Date.now() / 1000) % 2);
      },
      1000
   );
</script>
 
<style>
#time-node {
   padding: 15px;
   background: #000;
   color: #0f0;
   display: inline-block;
   font-weight: bold;
   border-radius: 4px;
   width: 50px;
   text-align: center;
}
</style>
Так каждую секунду мы проверяем, является ли она четной: Math.round(Date.now() / 1000) % 2 (если четная - выводим время с двоеточием, иначе без). Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Что такое JavaScript 2D игра на JS. Canvas, поворот изображения. jQuery. Подключение библиотеки, функция $ Таймер. setTimeout и setInterval Рисование и вращение изображения в Canvas
↑