天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
大鹏一日同风起，扶摇直上九万里。
------《上李邕》
文章目录
JS（JavaScript）BOM操作 趣味案例 计时器
1. 实现目标
这里制作一个计时器，计时器共三位，百位十位个位，以秒为单位计时，个位到9进一到十位，十位到九进一到百位，百位到九则三位归零重新开始
共三个按钮，开始、停止、重置
开始前三个按钮只能点开始按钮
开始按钮点了之后，开始按钮不可再点，可以点停止和重置按钮
停止按钮点了之后，停止按钮不可再点，开始和重置按钮可点
重置按钮点了之后，重置和停止按钮不可再点，可以点开始按钮
在开始之前需要有十张图片，用于显示每个位的数值
这里自己截图准备了从0-9的十张图片，可在后面的下载连接中和代码一起获取
2. 预览效果
最终实现的效果如下图，三个图对应百位十位个位的秒数计时，三个按钮对应三个功能
3. 示例代码
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bom操作-趣味案例-计时器</title>
<script>
// 在函数外部定义全局变量 分别为百位，十位，个位的秒数
var l = 0, c = 0, r = 0;
// 定义计时器变量
var timer;
// 开始的函数
function start(){
// 默认点开始时，开始按钮不可再点，停止按钮可以点，重置按钮可以点
$("start").disabled = true;
$("stop").disabled = false;
$("reset").disabled = false;
// 设置计时器函数
timer = setInterval(function(){
// 计时器开始，秒数r累加
r++
// 如果秒数大于9，则个位的秒数数归零，十位的秒数c累计+1
if(r>9){
r=0;
c++;
}
// 如果十位秒数数大于9，则十位秒数数归零，百位秒数l累计+1
if(c>9){
c=0;
l++;
}
// 如果百位秒数大于9，则百位十位个位全归零
if(l>9){
r=0;
c=0;
l=0;
}
//根据百位十位个位的数值，将对应的数字作为变量，展示数值对应的图片
$("imgr").src="./case_png/"+r+".png";
$("imgc").src="./case_png/"+c+".png";
$("imgl").src="./case_png/"+l+".png";
// 为了方便演示，这里秒数数值从1秒1000毫秒，改为了100毫秒
},100);
}
// 停止按钮的函数，默认点了停止按钮后，开始按钮可以点，停止按钮不可再点，重置按钮可以点
function stop(){
$("start").disabled = false;
$("stop").disabled = true;
$("reset").disabled = false;
// 清除周期性计时器，这里只是暂停，因为百位十位个位的数值没有清除，开始后会继续之前的数值累加
clearInterval(timer);
}
// 重置函数，默认点击重置按钮后，重置不可点，停止不可点，开始按钮可以点
function reset(){
$("start").disabled = false;
$("stop").disabled = true;
$("reset").disabled = true;
// 重置后，百位十位个位三个图片归零，全用0的图片展示
$("imgr").src="./case_png/0.png";
$("imgc").src="./case_png/0.png";
$("imgl").src="./case_png/0.png";
// 重置后三位数值也归零
r=0;
c=0;
l=0;
// 清除计时器
clearInterval(timer);
}
//通用函数：根据id操作对应的元素
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<tr>
<td><img src="./case_png/0.png" alt="left" id="imgl"></td>
<td><img src="./case_png/0.png" alt="center" id="imgc"></td>
<td><img src="./case_png/0.png" alt="right" id="imgr"></td>
</tr>
<br>
<tr>
<td><input type="button" value="start" id="start" onclick="start()"></td>
<td><input type="button" value="stop" id="stop" onclick="stop()" disabled></td>
<td><input type="button" value="reset" id="reset" onclick="reset()" disabled></td>
</tr>
</body>
</html>
4. 页面效果
页面效果如下
开始前
点击开始后
点击停止后
点击重置后
5. 示例代码下载
关于案例的示例代码下载地址：JavaScript BOM操作 计时器趣味案例 示例代码
感谢阅读，祝君暴富！
原文链接: https://hanshan.blog.csdn.net//article/details/140104006