JS（JavaScript）BOM操作趣味案例计时器_javascript中涉及bom的案例-CSDN博客

本文链接：https://blog.csdn.net/mo_sss/article/details/140104006

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

大鹏一日同风起，扶摇直上九万里。
——《上李邕》

文章目录

JS（JavaScript）BOM操作趣味案例计时器

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>