JavaScript 实现网页倒计时功能的两种实例代码
作者:闭包旅人时间:2026-10-29 19:10:40浏览:613
本文提供了两种使用 JavaScript 实现网页倒计时的完整代码实例。第一种适用于注册页面,通过禁用按钮并显示剩余时间引导用户阅读条款;第二种用于在线考试场景,实时显示剩余天、时、分、秒。代码包含 HTML 结构、CSS 样式及 JS 逻辑,可直接复制使用。
JavaScript 倒计时功能概述
本文分享了利用 JavaScript 实现网页倒计时的具体方法,供开发者参考学习。
在许多网站注册流程中,常会看到按钮倒计时的设计:用户需等待指定秒数后,注册按钮才恢复可点击状态。这种设计的目的是强制用户阅读注册注意事项,属于非常实用的交互效果。此外,在线考试系统中也常见答题倒计时功能。本文将通过具体的 JavaScript 代码,演示如何实现这两种倒计时效果。
注册按钮倒计时实现
首先展示第一个倒计时效果的 HTML 页面结构。
<html>
<head>
<title>倒计时</title>
<!--以下为css样式-->
<style type= "text/css">
.daojishi h2
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
margin-bottom:5px;
color:#151515;
}
.daojishi #timer
{
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
color:#151515;
font-weight:bold;
}
</style>
<script type = "text/javascript" src = "timer.js">
</script>
</head>
<body onload = "timer()">
<div class = "daojishi">
<h2>剩余时间为:</h2>
<div id = "timer">
</div>
</div>
</body>
</html>
接着提供对应的 脚本文件内容。
function timer()
{
var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);
document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
setInterval("timer()",1000);
}
function checkTime(i)
{
if (i < 10) {
i = "0" + i;
}
return i;
}
该示例的运行效果截图如下所示。

在线考试倒计时实现
随后介绍第二种 JavaScript 倒计时效果的实现方式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
<span id="t_d">00天</span>
<span id="t_h">00时</span>
<span id="t_m">00分</span>
<span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
function getRTime(){
var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
/*var d=Math.floor(t/1000/60/60/24);
t-=d*(1000*60*60*24);
var h=Math.floor(t/1000/60/60);
t-=h*60*60*1000;
var m=Math.floor(t/1000/60);
t-=m*60*1000;
var s=Math.floor(t/1000);*/
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);
document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(getRTime,1000);
</script>
</body>
</html>
第二个示例的运行效果截图如下。

开发者可根据实际项目需求,选择适合的倒计时代码进行集成。
希望上述内容能对读者的 JavaScript 编程实践提供有益帮助。
作者最新文章
什么时候该用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
