本文提供了两种使用 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 编程实践提供有益帮助。