修复JavaScript倒计时器中重复弹出的Alert框问题-html教程-PHP中文网

修复JavaScript倒计时器中重复弹出的Alert框问题

霞舞

发布： 2025-10-25 10:11:48

原创

484人浏览过

修复javascript倒计时器中重复弹出的alert框问题

本文旨在解决JavaScript倒计时器中，由于变量未正确更新导致Alert框重复弹出的问题。通过分析问题代码，我们将提供详细的修改方案，确保倒计时器在用户未输入时间时，只弹出一次提示框，并在用户修改时间后正常启动或停止。此外，我们还将优化部分代码逻辑，提升代码的可读性和健壮性。

问题分析

原代码中，当用户点击“Start”按钮时，会检查hours、minutes和seconds变量是否都为0。如果都为0，则弹出“Input needed”的Alert框。然而，即使在弹出Alert框后，用户通过选择器修改了时间，这些变量的值并没有更新，导致下次点击“Start”按钮时，仍然会满足条件，从而重复弹出Alert框。

解决方案

问题的核心在于，在用户通过选择器修改时间后，需要及时更新hours、minutes和seconds变量的值。为此，我们需要在addEventListener("change", ...)中添加更新变量的逻辑。

代码修改

以下是修改后的代码片段，着重关注addEventListener("change", ...)部分：

立即学习“Java免费学习笔记（深入）”；

window.onload = function() {
  // ... 其他代码 ...

  let interval = null;
  let hours = 0;
  let minutes = 0;
  let seconds = 0;
  let i = true;

  addEventListener("change", () => {
    if (!(interval)) // 仅当倒计时未运行时才更新变量
    {
      hours = Number(hoursFromSelector.value);
      minutes = Number(minutesFromSelector.value);
      seconds = Number(secondsFromSelector.value);
    }
    mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
  });

  reseter.addEventListener("click", () => {
    clearInterval(interval);
    mainclock.innerHTML = "00 : 00 : 00";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    starter.innerText = "Start";
    hours = 0; // 重置变量
    minutes = 0;
    seconds = 0;
  });

  starter.addEventListener("click", () => {
    if (hours == 0 && minutes == 0 && seconds == 0) {
      starter.innerText = "Start";
      clearInterval(interval)
      alert("Input needed");
    } else if (hours != 0 || minutes != 0 || seconds != 0) {
      card.style.display = "none";
      starter.innerText = "Stop";
      if (!interval) {
        hours = Number(hoursFromSelector.value);
        minutes = Number(minutesFromSelector.value);
        seconds = Number(secondsFromSelector.value);
        interval = setInterval(regulSec, 1000);
      } else {
        clearInterval(interval);
        interval = null;
        starter.innerText = "Resume";
      }
    }
  });

  // ... 其他代码 ...
};

登录后复制

修改说明：

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

查看详情

变量更新: 在addEventListener("change", ...)中，我们添加了hours = Number(hoursFromSelector.value);、minutes = Number(minutesFromSelector.value);和seconds = Number(secondsFromSelector.value);，确保每次选择器值改变时，变量都得到更新。使用Number()进行类型转换，确保变量为数值类型，避免后续计算错误。
倒计时运行判断: 增加if (!(interval))判断，只有当倒计时没有运行的时候才更新变量，避免了在倒计时运行过程中修改时间导致的问题。
Reset事件处理: 在reseter.addEventListener("click", ...)中，重置hours, minutes, seconds变量为0，确保下次启动的时候可以正确判断。

其他优化

parseInt vs Number: 虽然parseInt可以将字符串转换为整数，但Number更通用，可以处理更多情况，包括浮点数。因此，推荐使用Number进行类型转换。

confirm()返回值: confirm()函数返回一个布尔值，表示用户的选择。在quiter.addEventListener中，应该将confirm()的返回值赋给一个变量，并在if语句中使用该变量。

quiter.addEventListener("click", () => {
  const confirmed = confirm("Are you sure that you do not want to save your settings?");
  if (confirmed) {
    card.style.display = "none";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    mainclock.innerHTML = "00 : 00 : 00";
  }
});

登录后复制

regulSec 优化: 优化了regulSec函数中的逻辑，使其更加简洁易懂。

function regulSec() {
  if (seconds > 0) {
    seconds--;
  }
  else if (seconds == 0 && minutes > 0) {
    minutes--;
    seconds = 59;
  }
  else if (seconds == 0 && minutes == 0 && hours > 0) {
    hours--;
    minutes = 59;
    seconds = 59;
  }
  if (hours == 0 && minutes == 0 && seconds == 0)
  {
    clearInterval(interval);
    starter.innerText = "Start"; // 倒计时结束时，重置按钮文本
  }
  h = hours < 10 ? "0" + hours : hours;
  sec = seconds < 10 ? "0" + seconds : seconds;
  min = minutes < 10 ? "0" + minutes : minutes;
  mainclock.innerHTML = `${h} : ${min} : ${sec} `;
}

登录后复制

完整代码

window.onload = function() {
  //Card
  const card = document.getElementById("card");

  //Buttons
  const editer = document.getElementById("editer");
  const reseter = document.getElementById("reseter");
  const x = document.getElementById("close-btn");
  const starter = document.getElementById("starter");
  const quiter = document.getElementById("quiter");

  //"Select"-elements
  const hoursFromSelector = document.getElementById("edt-hours");
  const minutesFromSelector = document.getElementById("edt-minutes");
  const secondsFromSelector = document.getElementById("edt-seconds");

  //For calculation
  const mainclock = document.getElementById("mainclock");

  let interval = null;
  let hours = 0;
  let minutes = 0;
  let seconds = 0;
  let i = true;

  addEventListener("change", () => {
    if (!(interval))
    {
      hours = Number(hoursFromSelector.value);
      minutes = Number(minutesFromSelector.value);
      seconds = Number(secondsFromSelector.value);
    }
    mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
  });

  reseter.addEventListener("click", () => {
    clearInterval(interval);
    mainclock.innerHTML = "00 : 00 : 00";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    starter.innerText = "Start";
    hours = 0; // 重置变量
    minutes = 0;
    seconds = 0;
  });

  starter.addEventListener("click", () => {
    if (hours == 0 && minutes == 0 && seconds == 0) {
      starter.innerText = "Start";
      clearInterval(interval)
      alert("Input needed");
    } else if (hours != 0 || minutes != 0 || seconds != 0) {
      card.style.display = "none";
      starter.innerText = "Stop";
      if (!interval) {
        hours = Number(hoursFromSelector.value);
        minutes = Number(minutesFromSelector.value);
        seconds = Number(secondsFromSelector.value);
        interval = setInterval(regulSec, 1000);
      } else {
        clearInterval(interval);
        interval = null;
        starter.innerText = "Resume";
      }
    }
  });

function regulSec() {
  if (seconds > 0) {
    seconds--;
  }
  else if (seconds == 0 && minutes > 0) {
    minutes--;
    seconds = 59;
  }
  else if (seconds == 0 && minutes == 0 && hours > 0) {
    hours--;
    minutes = 59;
    seconds = 59;
  }
  if (hours == 0 && minutes == 0 && seconds == 0)
  {
    clearInterval(interval);
    starter.innerText = "Start"; // 倒计时结束时，重置按钮文本
  }
  h = hours < 10 ? "0" + hours : hours;
  sec = seconds < 10 ? "0" + seconds : seconds;
  min = minutes < 10 ? "0" + minutes : minutes;
  mainclock.innerHTML = `${h} : ${min} : ${sec} `;
}

//Functions without any actual mathematical reference
//Showing main-card
editer.addEventListener("click", () => {
  if (i == true) {
    card.style.display = "block";
    i = false;
  } else if (i == false) {
    card.style.display = "none";
    i = true;
  }
});

//Closing-button for main-card
x.addEventListener("click", () => {
  card.style.display = "none";
  i = true;
});

quiter.addEventListener("click", () => {
  const confirmed = confirm("Are you sure that you do not want to save your settings?");
  if (confirmed) {
    card.style.display = "none";
    hoursFromSelector.selectedIndex = 0;
    minutesFromSelector.selectedIndex = 0;
    secondsFromSelector.selectedIndex = 0;
    mainclock.innerHTML = "00 : 00 : 00";
    hours = 0; // 重置变量
    minutes = 0;
    seconds = 0;
  }
});
};

登录后复制