JS鬧鐘需要調整

我正在嘗試為我用 Django 創建的 webapp 設定鬧鐘。為此，我遵循了一些教程并根據我的需要和所有調整了代碼。有用。我的問題是，我想使用從 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）進行比較，如果它們匹配，則響起聲音（無論日期如何或分鐘）。

The variable "value" in setAlarmTime, is the user input that is being submitted via a form, but since I dont want that form anymore, (instead, I want to use my django variables), I didnt include that part of the code here.

The form user normally submits, has HTML input field that has type of "datetime-local". I tried to write my js_hour python variable in this format, like following

views.py

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

and then adjusted following part:

alarm.html

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

Thought this should do the trick. When I dont play around and just get the user input, type of alarmTime is [object HTMLInputElement], and when I replace it with {{ js_hour }}, data type turns into an object. And no alarm rings, code stop working.

Any suggestions?

uj5u.com熱心網友回復：

做就是了

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

并洗掉警報-您沒有名為 value 的 var

顯示代碼片段

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>

標籤：javascript python html django variables

上一篇：如何用檔案中的空格替換換行符？

下一篇：如何在python中將任意長度的文本檔案讀入單獨的字串和整數變數？