Javascript计时器不起作用

Javascript timer not working..

本文关键字：不起作用 计时器 Javascript      更新时间：2023-09-26

这是我的代码，请告诉我我在哪里犯了错误，这样我就可以从中吸取教训，并希望它:)工作。

这是 html：

<input type="text" id="txt" />
<input type="button" value="Start Timer" onclick="startTimer()" />

这是javascript：

var  Timer = 120;
var checkTimer = false;
var t;
function  countDown(){
doucment.getElementById("txt").value = Timer;
Timer--;
t = setTimeout("countDown();", 1000);
}
function startTimer(){
if(!checkTimer){
checkTimer = true;
countDown();
}
else{
console.log("Error!");
}
}

在这个小提琴中查看你的代码

让我偶然发现了一些事情，

    未
  1. 找到onclick中的startTimer()。
  2. doucment ！== document正如斯特林·阿切尔所指出
    3. 的那样
  3. 字符串 eval 可以更改为 t = setTimeout(countDown, 1000); 斯特林·阿切尔也指出了这一点

现在让我们进入解决方案。

.HTML 

<input type="text" id="txt" />
<!-- Removed the onclick attribute and added an ID for the eventListener -->
<input type="button" value="Start Timer" id="start" />

.JS

//Event listener for the button. Same as the onClick, this one, however, does work.
document.getElementById("start").addEventListener("click", startTimer, false);
var Timer = 120;
var checkTimer = false;
var t;
function countDown() {
  document.getElementById("txt").value = Timer;
  Timer--;
  t = setTimeout(countDown, 1000);
}
function startTimer() {
  if (!checkTimer) {
    checkTimer = true;
    countDown();
  } else {
    console.log("Error!");
  }
}

我所做的是：

  • 我添加了一个事件侦听器来应对startTimer()"找不到"错误
  • 我已将doucment更改为document
  • 我已将您的字符串评估更改为t = setTimeout(countDown, 1000);

希望这有帮助！

你有一个错别字。你应该有document.getElementById("txt")而不是doucment.getElementById("txt").试试这个：

var Timer = 120;
var checkTimer = false;
var t;
function countDown() {
  document.getElementById("txt").value = Timer;
  Timer--;
  t = setTimeout("countDown();", 1000);
}
function startTimer() {
  if (!checkTimer) {
    checkTimer = true;
    countDown();
  } else {
    console.log("Error!");
  }
}

更新：如果您希望计时器停止在零，则需要添加一个 if 语句以查看计时器是否大于 0，然后再递减计时器。那看起来像这样：

.HTML：

<input type="text" id="txt" />
<input type="button" value="Start Timer" onclick="startTimer()" />

.JS：

var Timer = 120;
var checkTimer = false;
var t;
function countDown() {
  document.getElementById("txt").value = Timer;
  if (Timer > 0){
    Timer--;
  }
  t = setTimeout("countDown();", 1000);
}
function startTimer() {
  if (!checkTimer) {
    checkTimer = true;
    countDown();
  } else {
    console.log("Error!");
  }
}

演示：https://jsfiddle.net/hopkins_matt/moks2oyb/

可以对此代码进行进一步的改进，但这是为了说明一旦修复错误，您的代码将正常工作。

相关文章：