当输入值等于当前时间时触发警报

Question

我想创建多个闹钟并触发任何一个闹钟，只要该闹钟的值（小时和分钟）在任何时候等于当前时间（小时和分钟）。我根据用户输入生成警报，用户在其中输入他们希望警报触发的设定时间（小时和分钟），只要用户输入与当前时间匹配，就会触发警报。这里的问题是，闹钟不响。设定的时间将过去，闹钟将拒绝响铃。这是我的代码。

CSS

#ring {display:none;}
li {list-style-type: none; border: solid gray 1px; padding:10px; margin: 3px;}

HTML

<body onload="startTime()">
<div id="txt"></div> <br>
<h1 id="ring">Ring!!!!!!!!!</h1>

<input type="text" placeholder="hour" id="hour">
<input type="text" placeholder="minute" id="minute">
<button onclick="addAlarm()">Set alarm</button>


<ul id="list">
<!--Alarm clocks goes here-->
</ul>

</body>

JAVASCRIPT

function startTime(alarmHour, alarmMinute) {
  var today = new Date();
  var currentHour = today.getHours();
  var currentMinute = today.getMinutes();
  var currentSecond = today.getSeconds();
  document.getElementById('txt').innerHTML =
  currentHour + ":" + currentMinute + ":" + currentSecond;
  var t = setTimeout(startTime, 500);

  
  if(currentHour == alarmHour && currentMinute == alarmMinute) {
  document.getElementById("ring").style.display = "block"
  }
 
};


var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");


function newAlarm(hour, minute){
    startTime(hour, minute)
    theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`; 

    var position = "afterbegin";
    list.insertAdjacentHTML(position, theAlarm);
              

  }

  function addAlarm(){
   var hour = parseInt(alHour.value);
   var minute = parseInt(alMinute.value);
    if (hour, minute) {
      newAlarm(hour, minute);
      alHour.value ="";
      alMinute.value ="";
    }
  };

Answer 1

嗯，我不太了解你的问题，但我在这里根据你所说的修改了代码

var alarmhour;
var alarmminute;

setInterval(function() {
  var today = new Date();
  var currentHour = today.getHours();
  var currentMinute = today.getMinutes();
  var currentSecond = today.getSeconds();
  document.getElementById('txt').innerHTML =
    currentHour + ":" + currentMinute + ":" + currentSecond;
  if (currentHour == alarmhour && currentMinute == alarmminute) {
    document.getElementById("ring").style.display = "block";
  }

}, 500)


var list = document.getElementById("list");
var alHour = document.getElementById("hour");
var alMinute = document.getElementById("minute");


function newAlarm(hour, minute) {
  alarmhour = hour;
  alarmminute = minute;
  theAlarm = `<li><span>${hour}:</span><span>${minute}</span></li>`;

  var position = "afterbegin";
  list.insertAdjacentHTML(position, theAlarm);


}

function addAlarm() {
  var hour = parseInt(alHour.value);
  var minute = parseInt(alMinute.value);
  if (hour, minute) {
    newAlarm(hour, minute);
    alHour.value = "";
    alMinute.value = "";
  }
};

#ring {
  display: none;
}

li {
  list-style-type: none;
  border: solid gray 1px;
  padding: 10px;
  margin: 3px;
}

<body>
  <div id="txt"></div> <br>
  <h1 id="ring">Ring!!!!!!!!!</h1>

  <input type="text" placeholder="hour" id="hour">
  <input type="text" placeholder="minute" id="minute">
  <button onclick="addAlarm()">Set alarm</button>


  <ul id="list">
    <!--Alarm clocks goes here-->
  </ul>

</body>

单击上面的运行代码段以查看代码运行ning

当输入值等于当前时间时触发警报

Trigger alarm when input values equals to current time

html

javascript

alarm