Рекурсия в функции draw

95
06 февраля 2022, 05:30

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <canvas id ="ctx"></canvas>
    <script>
        window.onload = init;
        var ctx, canvas;
        function init() {
         canvas = document.getElementById("ctx");
         ctx = canvas.getContext("2d");
            setTimeout(draw,500);
        }
        function draw() {
              // Переменые
                let date = new Date();
                let hours = date.getHours();
                let minutes = date.getMinutes();     
              // Ведущий ноль, проверки и условия
      if (minutes <= 9){
            minutes = "0" + minutes;
      }
      if (hours <= 9 ) {
            hours = "0" + hours;
      }
              // Рисование
             ctx.fillStyle = "Turquoise";
            ctx.strokeStyle = "SteelBlue";
             ctx.strokeRect(10,10,250,150);
            ctx.lineWidth = 25;
            ctx.fillRect(10,10,250,150);
            //  Цифры
            ctx.fillStyle = "white"
            ctx.font = "5em serif ";
            ctx.fillText(hours,25,100);         
            ctx.fillText(":",120,100);    // двоеточие    
            ctx.fillText(minutes,155,100);
        }
    </script>
</body>
</html>
Answer 1
var ctx, canvas;
var show = true;
...
setInterval(draw, 500);
...
if (show)
  ctx.fillText(":", 120, 100);
show = !show;
READ ALSO
Исключить ненужные значения при поиске

Исключить ненужные значения при поиске

Имеется рабочий код, который получает html-данные с помощью ajax

78
Получить и отправить данные из формы

Получить и отправить данные из формы

Приветствую знатоков WEB разработки, сам я в этой области новичок, делаю учебный проект, поэтому появился вопросЕсть такая форма:

57