JS实现十分钟倒计时代码实例
本文介绍如何使用JavaScript实现十分钟倒计时功能。通过setInterval定时器配合Math.floor计算分秒,结合if条件判断实现剩余5分钟提醒及时间结束时的弹窗提示。代码包含HTML结构定义与JS逻辑处理,适用于考试或活动场景的倒计时需求。
JavaScript倒计时实现概述
实现JavaScript倒计时功能涉及多个核心知识点,包括条件判断、数学取整运算以及定时器机制等。若对、或等概念尚不熟悉,建议参考PHP中文网的相关教程或观看JavaScript视频课程以加深理解。
以下通过一个具体的十分钟考试倒计时场景进行演示:当剩余时间降至五分钟时,系统需发出提醒;当时间归零时,则提示考试结束。具体实现代码如下所示:
HTML与JS代码结构
HTML结构部分如下:
<body>
<div id="timer"></div>
<div id="warring"></div>
</body>
JavaScript逻辑部分如下:
<script type="text/javascript">
var maxtime = 10 * 60; //
function CountDown() {
if (maxtime >= 0) {
minutes = Math.floor(maxtime / 60);
seconds = Math.floor(maxtime % 60);
msg = "距离结束还有" + minutes + "分" + seconds + "秒";
document.all["timer"].innerHTML = msg;
if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");
--maxtime;
} else{
clearInterval(timer);
alert("时间到,结束!");
}
}
timer = setInterval("CountDown()", 1000);
</script>
倒计时逻辑步骤详解
实现十分钟倒计时的具体步骤解析如下:
1、初始化倒计时总时长,设置变量maxtime为10乘以60,即600秒,对应10分钟。
2、利用if语句进行条件判断,当maxtime大于或等于0时,通过Math.floor函数分别计算剩余的分钟数和秒数。
3、再次使用if语句判断特定节点,当maxtime等于5乘以60(即剩余5分钟整)时,触发弹窗提示:距离结束仅剩5分钟。
4、当倒计时结束(maxtime小于0)时,执行clearInterval清除定时器,并弹出提示框显示:结束。
最终运行效果如图所示:



JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
