下面是关于“JavaScript在控件上添加倒计时功能的实现代码”的完整攻略。
1. 实现思路
要在控件上添加倒计时功能，需要实现以下几步：
-
获取需要显示倒计时的控件对象；
-
设置倒计时的总时间（例如60秒）和时间间隔（例如每一秒钟）；
-
创建一个计时器，定时更新控件上显示的倒计时时间；
-
到达倒计时结束时间后，清除计时器。
2. 实现代码示例
以下是两个实现倒计时功能的示例代码：
示例1.用 setInterval() 方法实现倒计时功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS倒计时示例1</title>
<style type="text/css">
body{
font-size: 18px;
font-family: '微软雅黑', sans-serif;
}
</style>
</head>
<body>
<h1>倒计时示例1</h1>
<p>距离离开此页面还有 <span id="seconds">60</span> 秒</p>
<script type="text/javascript">
var max_time = 60; //倒计时总时间（单位：秒）
var countdown = max_time, //倒计时记时
timer = null; //计时器对象
// 倒计时函数
function countDown(){
if (countdown === 0) {
clearInterval(timer);
alert('倒计时结束，页面自动关闭。');
window.close();
}
document.getElementById('seconds').innerHTML = countdown;
countdown--;
}
// 启动倒计时
timer = setInterval(countDown, 1000);
</script>
</body>
</html>
示例2. 用 setTimeout() 方法实现倒计时功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS倒计时示例2</title>
<style type="text/css">
body{
font-size: 18px;
font-family: '微软雅黑', sans-serif;
}
</style>
</head>
<body>
<h1>倒计时示例2</h1>
<p>距离离开此页面还有 <span id="seconds">60</span> 秒</p>
<script type="text/javascript">
var max_time = 60; //倒计时总时间（单位：秒）
// 倒计时函数
function countDown(){
if (max_time === 0) {
alert('倒计时结束，页面自动关闭。');
window.close();
}else{
document.getElementById('seconds').innerHTML = max_time;
max_time--;
setTimeout(countDown, 1000);
}
}
// 启动倒计时
setTimeout(countDown, 1000);
</script>
</body>
</html>
注：以上两个示例中，第一个使用 setInterval() 方法实现倒计时，每秒钟更新一次时间；第二个使用 setTimeout() 方法实现倒计时，每秒钟递归一次，更新一次时间。两种方法实现的相似地方在于，倒计时结束后都会弹出一个提示框，表示倒计时已结束。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript在控件上添加倒计时功能的实现代码 - Python技术站
微信扫一扫 
支付宝扫一扫 