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

问题描述

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

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 ="";
    }
  };

解决方法

嗯，我对您的问题没有太多了解，但是在这里，我根据您的意见修正了代码

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>

点击上方的运行代码片段以查看运行的代码

alarm alarm html javascript