修复J*aScript倒计时器中重复弹出的Alert框问题_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

修复J*aScript倒计时器中重复弹出的Alert框问题

2025-10-25

浏览次数：次

返回列表

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

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

问题分析

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

解决方案

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

代码修改

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

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

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

修改说明：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

变量更新: 在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 s*e 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 s*e 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;
  }
});
};

总结

通过及时更新变量值，并优化代码逻辑，我们成功解决了J*aScript倒计时器中Alert框重复弹出的问题。同时，我们也学习了如何使用Number进行类型转换，以及如何正确处理confirm()函数的返回值。希望本文能帮助你更好地理解J*aScript事件处理和变量管理，并提升你的前端开发技能。

以上就是修复J*aScript倒计时器中重复弹出的Alert框问题的详细内容，更多请关注其它相关文章！

# java # javascript # 选择器 # 器中 # 小爱 # 置顶 # 弹出 # 倒计时 # win # ai # 前端开发 # 前端 # html # 佛山网站建设百度 # 实用网站推广工具 # 常德网站关键词排名 # 兴义seo营销效果最好 # 宿州seo优化流程 # 射阳seo优化企业 # 潮州seo网络营销 # 金华seo霸屏 # 新圩网站建设费用 # seo 逆向测试 # 连接到 # 都为 # 并在 # 返回值

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：cssabsolute元素在flex容器中表现

下一篇：使用 J*aScript 修改 HTML 元素的 Class 属性

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们