Question

我正在尝试制作一个简单的闹钟来练习我认为问题出在时间输入上，但我无法发现问题出在哪里我试图做的最后一件事是将innerHTML字符串与if：D匹配是间隔问题还是与我不知道的匹配问题我仍然是初学者，请先谢谢

var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
dateId.innerHTML = date;

function myTimer() {
  var d = new Date();
  document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}

setInterval(myTimer, 1000);
document.getElementById("Stime").addEventListener("input", SetTime);

function SetTime() {
  var input = this.value;
  console.log(input)
  return input;
}

var inputValue = SetTime();

function matchTime() {
  if (inputValue === timeId.innerHTML) {
    console.log("Alarm")
  }
}

setInterval(matchTime, 1000);
console.log(inputValue); //it gives me undefined

<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>

<input id="Stime" type="time" step="1" name="appt-time" value="13:30">
<div id="SLtime"> </div>
<div id="SPtime"> </div>

Answer 1

您第一次在此处运行SetTime()：

var inputValue = SetTime();

this.value内的

SetTime()未定义，因为它是由窗口调用的。以后在<input>上将其作为事件调用时，它将为您提供期望的值。让<input>代替调用该函数，您将获得它的值。

var stime = document.getElementById("Stime");
var inputValue = SetTime.call(stime);

这是完整的代码段：

var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
dateId.innerHTML = date;

function myTimer() {
  var d = new Date();
  document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}

setInterval(myTimer, 1000);
document.getElementById("Stime").addEventListener("input", SetTime);

function SetTime() {
  var input = this.value;
  console.log(input)
  return input;
}

var stime = document.getElementById("Stime");
var inputValue = SetTime.call(stime);

function matchTime() {
  if (inputValue === timeId.innerHTML) {
    console.log("Alarm")
  }
}

setInterval(matchTime, 1000);
console.log(inputValue); //it gives me undefined

<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>

<input id="Stime" type="time" step="1" name="appt-time" value="13:30">
<div id="SLtime"> </div>
<div id="SPtime"> </div>

Answer 2

实际上，当您更改警报值时，只有从小时和分钟算起，直到您手动更改秒数为止。并且我们正在比较计时器（包含小时，分钟和秒）和仅包含小时和分钟的警报值，这就是为什么不打印警报的原因。

我只是在计时器中添加秒数“：00”，并将其与警报值进行比较。

var dateId = document.getElementById("date")
var timeId = document.getElementById("time")
var date = new Date();
var setTime; // used for set the alerm time value.
dateId.innerHTML = date;

function myTimer() {
  var d = new Date();
  document.getElementById("time").innerHTML = d.toLocaleTimeString().slice(0, 8);
}

setInterval(myTimer, 1000);

 document.getElementById("Stime").addEventListener("input", function (evt) {
    // Add :00 in value for seconds.
    setTime = this.value.length == 5 ? (this.value+':00') :this.value; // set the setTime (alarm value)
});

function matchTime() {
  // check the alarm value with our timer
  if (setTime=== timeId.innerHTML) {
    console.log("Alarm")
  }
}

setInterval(matchTime, 1000);
console.log(setTime);

<div id="date"> </div>
<div id="time"> </div>
<br>
<br>
<br>

<input id="Stime" type="time" step="1" name="appt-time" value="13:30" min="00:00:00">
<div id="SLtime"> </div>
<div id="SPtime"> </div>

希望这会对您有所帮助。

有人可以告诉我此JS警报是怎么了吗

2 个答案: