JS Будильник нуждается в настройке

Я пытаюсь установить будильник для веб-приложения, которое я создаю с помощью Django. Для этого я следовал некоторым туториалам и подгонял код под свои нужды и все такое. Все работает. Моя проблема в том, что я хочу установить время и дату вручную, используя переменные, которые я получаю из представлений Django (я передал переменные hour и min в мой HTML файл). Вот мой файл alarm.html:

{% extends 'mainapp_hf/base.html' %}
{% block content %}

 {{ js_hour  }}


      <div style="width: 100%; display: flex; justify-content: center; ">

          <div id="clock"></div>


    <script> 
        const display = document.getElementById('clock');
        
        
        const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
        audio.loop = true;
        let alarmTime = null;
        let alarmTimeout = null;
        
        
        function updateTime() {
            const date = new Date();
        
            const hour = formatTime(date.getHours());
            const minutes = formatTime(date.getMinutes());
            const seconds = formatTime(date.getSeconds());
        
        
        
            display.innerText=`${hour} : ${minutes} : ${seconds}`
        }
        
        function formatTime(time) {
            if ( time < 10 ) {
                return '0' + time;
            }
            return time;
        }
        
        function setAlarmTime(value) {
        
            alarmTime = value;
        }
        
        function setAlarm() {
            if(alarmTime) {
                const current = new Date();
                const timeToAlarm = new Date(alarmTime);
        
                if (timeToAlarm > current) {
                    const timeout = timeToAlarm.getTime() - current.getTime();
                    alarmTimeout = setTimeout(() => audio.play(), timeout);
                    setTimeout(clearAlarm, timeout + 5000);
                    alert( value );
                }
            }
        }
        
        function clearAlarm() {
            audio.pause();
            if (alarmTimeout) {
                clearTimeout(alarmTimeout);
                alert("value");
            }
        }
        
        setAlarmTime
        setAlarm
        alert( value )
        
        setInterval(updateTime, 1000);
    </script>
    </div>
{% endblock %}

Я новорожденный ученик JS. Я понятия не имею, как двигаться дальше на данный момент, просто понять и настроить этот текущий код заняло у меня несколько часов. Для начала, я могу игнорировать все остальные переменные (такие как дата, минута, секунда). Может ли кто-нибудь подсказать мне, как просто получить реальное время и сравнить его с моей переменной django {{ js_hour }}. (тип данных - число, и, допустим, оно равно 15) и, если они совпадают, подать звуковой сигнал (независимо от даты или минуты).

Переменная "value" в setAlarmTime, это пользовательский ввод, который отправляется через форму, но поскольку мне больше не нужна эта форма, (вместо этого я хочу использовать мои переменные django), я не включил эту часть кода сюда.

В форме, которую обычно отправляет пользователь, есть поле ввода HTML, которое имеет тип "datetime-local". Я попытался записать свою переменную js_hour python в этом формате, как показано ниже

views.py

js_hour = "2022-03-29T11:00"

и затем корректируется следующая часть:

alarm.html

        function setAlarmTime(value) {
        
            alarmTime = {{ js_hour  }};
        }

Подумал, что это должно помочь. Когда я не играюсь и просто получаю данные от пользователя, тип alarmTime - [object HTMLInputElement], а когда я заменяю его на {{ js_hour }}, тип данных превращается в объект. И будильник не звонит, код перестает работать.

Есть предложения?

Просто сделай

setAlarmTime("{{ js_time }}");
setAlarm()

и удалите предупреждения - у вас нет var с именем value

const display = document.getElementById('clock');
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
audio.loop = true;
let alarmTime = null;
let alarmTimeout = null;


function updateTime() {
  const date = new Date();

  const hour = formatTime(date.getHours());
  const minutes = formatTime(date.getMinutes());
  const seconds = formatTime(date.getSeconds());
  display.innerText = `${hour} : ${minutes} : ${seconds}`
}

function formatTime(time) {
  if (time < 10) {
    return '0' + time;
  }
  return time;
}

function setAlarmTime(value) {
  alarmTime = value;
}

function setAlarm() {
  if (alarmTime) {
    const current = new Date();
    const timeToAlarm = new Date(alarmTime);
console.log(timeToAlarm)
    if (timeToAlarm > current) {
      const timeout = timeToAlarm.getTime() - current.getTime();
      alarmTimeout = setTimeout(() => audio.play(), timeout);
      setTimeout(clearAlarm, timeout + 5000);
    }
    else { console.log("time has passed") }
  }
}

function clearAlarm() {
  audio.pause();
  if (alarmTimeout) {
    clearTimeout(alarmTimeout);
    console.log("Cleared");
  }
}
setAlarmTime("2022-03-29T12:23"); // "{{ js_time }}";
// debug
let d = new Date()
d.setSeconds(d.getSeconds() + 10)
setAlarmTime(d.toString())
// end debug

setAlarm()
setInterval(updateTime, 1000);
<div style="width: 100%; display: flex; justify-content: center; ">

  <div id="clock"></div>
</div>

Вернуться на верх