Javascript-форум - Сегодняшняя дата и время

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Сегодняшняя дата и время (https://javascript.ru/forum/misc/78232-segodnyashnyaya-data-i-vremya.html)

остался один вопросик, как сделать ежесекундное обновление дива?

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                font: 14px serif;
                border: 1px solid #ccc;
                padding: 5px;
                margin-bottom: 5px;
                text-align: center;
            }
            #block_time-data {
            display: inline-block;
            white-spage: nowrap; }
            span { display: inline-block;
            white-space: nowrap; }
            #hours, #min, #sec {  }
            
            .colon { color: hsl(0, 0%, 60%); }
        </style>
    </head>
    <body>
        <div id="block_time-data">
        <span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span><br>
        <span id="day"></span><br>
        <span id="date"></span>
        <span id="month_name"></span>(<span id="month"></span>)
        <span id="year"></span>
        г.
        </div>
        <script>
            var hours = document.getElementById('hours');
            var minutes = document.getElementById('min');
            var seconds = document.getElementById('sec');
            var day = document.getElementById('day');
            var date_name = document.getElementById('date');
            var month = document.getElementById('month');
            var month_name = document.getElementById('month_name');
            var year = document.getElementById('year');
 
            var date = new Date();
            var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
            var monthes = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
 
            hours.innerHTML = date.getHours();
            minutes.innerHTML = date.getMinutes();
            seconds.innerHTML = date.getSeconds();
 
            day.innerHTML = days[date.getDay()]; 
            date_name.innerHTML = date.getDate();
            month.innerHTML = date.getMonth()+1;
            month_name.innerHTML = monthes[date.getMonth()];
            year.innerHTML = date.getFullYear();
            [hours, min, sec, date_name, month].forEach(function(el) {
               el.innerHTML = ("0"+ el.innerHTML).slice(-2)
             })
         </script>
    </body>
</html>

Блондинка,

(function timer()
{
 //сюда строки 42, 46 - 57
 window.setTimeout(timer, 1000);
})()

Есть десять цветов hsl(0, 0%, 54%) hsl(0, 0%, 48%) hsl(0, 0%, 42%) hsl(0, 0%, 36%) hsl(0, 0%, 30%) hsl(0, 0%, 24%) hsl(0, 0% 18%) hsl(0, 0%, 12%) hsl(0, 0%, 6%) hsl(0, 0%, 0%), возможно ли сделать чтобы <span class="colon"> менял цвет от светлосерого до чёрного с интервалом в 100 милисекунд?

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div {
        font: 14px serif;
        border: 1px solid #ccc;
        padding: 5px;
        margin-bottom: 5px;
        text-align: center;
        }
        #block_time-data {
        display: inline-block;
        white-spage: nowrap; }
        span { display: inline-block;
        white-space: nowrap; }
        #hours, #min, #sec {  }
        colon { color: hsl(0, 0%, 54%); }
        </style>
    </head>
    <body>
        <div id="block_time-data">
        <span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span><br>
        <span id="day"></span><br>
        <span id="date"></span>
        <span id="month_name"></span>(<span id="month"></span>)
        <span id="year"></span>
        г.
        </div>
    <script>
      var hours = document.getElementById('hours');
      var minutes = document.getElementById('min');
      var seconds = document.getElementById('sec');
      var day = document.getElementById('day');
      var date_name = document.getElementById('date');
      var month = document.getElementById('month');
      var month_name = document.getElementById('month_name');
      var year = document.getElementById('year');
      var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
      var monthes = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
      (function timer()
      {
      var date = new Date();
      hours.innerHTML = date.getHours();
      minutes.innerHTML = date.getMinutes();
      seconds.innerHTML = date.getSeconds();
      day.innerHTML = days[date.getDay()]; 
      date_name.innerHTML = date.getDate();
      month.innerHTML = date.getMonth()+1;
      month_name.innerHTML = monthes[date.getMonth()];
      year.innerHTML = date.getFullYear();
      [hours, min, sec, date_name, month].forEach(function(el) {
      el.innerHTML = ("0"+ el.innerHTML).slice(-2)
      })
      window.setTimeout(timer, 1e3);
      })()
    </script>
  </body>
</html>

P. S. использовать css-свойство animation нежелательно, поскольку загрузка страницы происходит в разные моменты времени, а не точно в 000 милисекунд, и анимация начнет работать асинхронно с обновлением секунд...

Цитата:

Сообщение от Блондинка

это я знаю, надо было именно массив...

зачем? такого же результата как у вас, рамка с часами и датой можно добиться гораздо проще.

Цитата:

Сообщение от Блондинка

возможно ли сделать чтобы <span class="colon"> менял цвет от светлосерого до чёрного с интервалом в 100 милисекунд?

<span class="colon" style="font-size: 100px">:</span>
  <script>
     var colon = document.querySelectorAll('.colon'), i=0;
    (function timer() {
      i = i ? i-6 : 54;
      colon.forEach(el=>el.style.color = 'hsl(0, 0%, '+i+'%)');
      setTimeout(timer, 100);
    })();
</script>

функцию timer можно использовать одну, время обновлять по условию

Цитата:

Сообщение от j0hnik (Сообщение 511677)

зачем? такого же результата как у вас, рамка с часами и датой можно добиться гораздо проще.

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

а можно скрипт попроще, типа массив из десяти цветов(неажно в каком формате hex, rgb, hsl) и просто изменение цвета с интервалом в 100 милисекунд...