时间戳

首页 > 解决方案 > 当输入值等于当前时间时触发报警

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

问题描述

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

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

标签： javascripthtmlalarm

解决方案

嗯，我没有太多了解您的问题，但在这里我根据您所说的修复了代码

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>

点击上面的运行片段，查看运行的代码

推荐阅读