JavaScriptBOM操作计时器趣味案例示例代码_javascriptbom案例资源-CSDN文库

共11个文件

png：10个

html：1个

javascript

趣味案例

需积分: 5 16 浏览量 2024-07-01 16:01:45 上传评论收藏 12KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Interval_Timer_Case.zip （11个子文件）

14bom_case.html 4KB

case_png

9.png 1KB

3.png 1KB

0.png 1KB

1.png 422B

6.png 1KB

5.png 992B

4.png 682B

8.png 1KB

7.png 657B

2.png 966B

<!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>

评论收藏

内容反馈