JS闹钟需要调整

Question

我正在尝试为我使用 Django 创建的网络应用程序设置闹钟。为此，我遵循了一些教程并根据我的需要和所有调整了代码。有用。我的问题是，我想使用从 Django 视图中获取的变量手动设置时间和日期（我将小时和分钟变量传递到我的 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）进行比较，如果它们匹配，则发出声音（无论日期或分钟）。

setAlarmTime 中的变量“value”是通过表单提交的用户输入，但由于我不再需要该表单（相反，我想使用我的 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 }} 时，数据类型变成了一个对象。并且没有闹钟响起，代码停止工作。

有什么建议吗？

Answer 1

随便做

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

并删除警报 - 您没有名为 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>

JS闹钟需要调整

JS Alarmclock needs adjustment

html

javascript

python

django

variables