<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js定时器</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
//初始化按钮
clockInterval.initButton();
});
// 计时器业务类
var clockInterval = {
// 计时数字
num : 10,
clockIntervalField : null,
// 初始化按钮
initButton : function () {
// 初始化计数
$("#clock").text(clockInterval.num);
// 计时任务
function clockIntervalFunction(){
// 如果计时大于0,显示计时数字
if(clockInterval.num > 0){
$("#clock").text(clockInterval.num);
}
// 倒数1个
clockInterval.num--;
// alert(clockInterval.num);
if(clockInterval.num < 0){
$("#clock").text("时间到!");
clearInterval(clockInterval.clockIntervalField);
}
};
// 开始倒计时按钮
$("input[value='开始倒计时']").click(function () {
// 初始化计时变量
clockInterval.clockIntervalField = setInterval(clockIntervalFunction, 1000);
});
// 暂停倒计时按钮
$("input[value='暂停倒计时']").click(function () {
clearInterval(clockInterval.clockIntervalField);
});
// 结束倒计时按钮
$("input[value='结束倒计时']").click(function () {
clockInterval.num = 0;
$("#clock").text("时间到!");
});
// 重置倒计时按钮
$("input[value='重置倒计时']").click(function () {
clockInterval.num = 10;
$("#clock").text(clockInterval.num);
});
}
};
</script>
</head>
<body>
<div style="margin:10px auto">
<div style="text-align: center;">
<h3>jquery或js定时器</h3>
<!--定时器测试-->
<input type="button" value="开始倒计时" />
<input type="button" value="暂停倒计时" />
<input type="button" value="结束倒计时" />
<input type="button" value="重置倒计时" />
<div id="clock" style="margin-top:10px;"></div>
</div>
</div>
</body>
</html>