JavaScript实现分钟与秒倒计时功能详解
作者:闭包旅人时间:2026-10-23 01:25:47浏览:155
本文介绍如何使用JavaScript结合HTML表单实现分钟和秒的倒计时功能。通过获取用户输入的分钟和秒数值,利用setTimeout递归调用实现每秒更新显示,并对输入为空或零值进行特殊处理,最终在页面指定区域动态展示倒计时过程。
JavaScript倒计时功能实现
具体实现代码如下所示。
<div class="container-fluid">
<div class="main-content-inner">
<div class="page-content">
<div class="page-header">
<form class="form-inline" id="searchform">
<div class="form-group" style="margin-left: 10px;">
<label>分</label>
<input type="text" class="form-control" name="Minute" id="Minute">
</div>
<div class="form-group" style="margin-left: 10px;">
<label>秒</label>
<input type="text" class="form-control" name="Second" id="Second">
</div>
<button type="button" class="btn btn-purple btn-sm" onclick="ok()"> 开始 </button>
</form>
</div>
<div class="row" style="height:500px;line-height:500px;vertical-align:middle;font-size:200px;color:red;text-align:center;margin-top:100px"> <p id="listview"></p>
</div>
</div>
</div>
</div>
<script>
var t;
var Minute;
var Second;
var d;
function ok() {
if ($("#Minute").val() == "0" || $("#Minute").val() == "") {
Minute = 0;
} else {
Minute = $("#Minute").val();
}
if ($("#Second").val() == "0" || $("#Second").val() == "") {
Second = 0;
} else {
Second = $("#Second").val();
}
var min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
var sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
$(".page-header").hide();
$("#listview").show();
setTimeout(function () {
begin()
}, 1000);
}
function begin() {
if (Second != 0) {
Second--;
min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
} else {
if (Minute > 0) {
Minute--;
Second = 59;
min = "";
if (Minute < 10) {
min = "0" + Minute;
} else {
min = Minute + "";
}
sec = "";
if (Second < 10) {
sec = "0" + Second;
} else {
sec = Second + "";
}
$("#listview").text(min + ":" + sec);
} else {
clearTimeout(t);
}
}
t = setTimeout(function () {
begin()
}, 1000)
}
</script>
以上内容即为该倒计时功能的完整实现方案,旨在为读者的学习或实际开发工作提供参考。若在理解或使用过程中遇到任何疑问,欢迎通过留言区进行交流探讨,感谢各位对本站的关注与支持!
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
