<!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>
寒山李白
- 粉丝: 2w+
- 资源: 72
最新资源
- (源码)基于C语言的系统服务框架.zip
- (源码)基于Spring MVC和MyBatis的选课管理系统.zip
- (源码)基于ArcEngine的GIS数据处理系统.zip
- (源码)基于JavaFX和MySQL的医院挂号管理系统.zip
- (源码)基于IdentityServer4和Finbuckle.MultiTenant的多租户身份认证系统.zip
- (源码)基于Spring Boot和Vue3+ElementPlus的后台管理系统.zip
- (源码)基于C++和Qt框架的dearoot配置管理系统.zip
- (源码)基于 .NET 和 EasyHook 的虚拟文件系统.zip
- (源码)基于Python的金融文档智能分析系统.zip
- (源码)基于Java的医药管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈