前端JavaScript——秒表实现

最新推荐文章于 2023-11-30 16:55:10 发布

tingyu_

最新推荐文章于 2023-11-30 16:55:10 发布

阅读量1.9k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/tingyu_/article/details/107099872

版权

web前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

秒表实现这一部分主要是通过JavaScript代码来实现的，在这里重点说JavaScript

图长这样：

页面结构样式代码如下：

HTML：

<body>
    <div id="div1">
        <div id="count">
            <span id="id_H">00</span><span>:</span>
            <span id="id_M">00</span><span>:</span>
            <span id="id_S">00</span>
        </div>
        <input id="start" type="button" value="开始">
        <input id="pause" type="button" value="停止">
        <input id="end" type="button" value="结束">
    </div>
</body>

CSS：

<style>
        #div1{
            width: 300px;
            height: 400px;
            background: blanchedalmond;
            margin: 70px auto;
            text-align: center;
        }
        #count{
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin: auto;   /*让计数的这个块居中*/
        }
        #div1 input{
            width: 150px;
            height: 40px;
            background-color: yellow;
            font-size: 25px;
            margin: auto;
        }
    </style>

JavaScript部分：

秒表：

1.点击开始：通过设置一个1000毫秒的定时器，然后再定时器中通过一个number型的变量计算进行到第几秒了，通过对这个数字进行数学计算就可以得到对应的时分秒，然后再页面上显示出来

2.点击停止：只需做一个清除定时器的操作进可以了，

3.结束：也就是将定时器计的数清零，页面上也数据也清零就可以了

【注】：在这里有一个需要注意的地方，如果只是简单做了这三步，会发现，当你多次点击了开始之后，计数器的速度会增加；

解决办法：在设置定时器之前（站在已经点了一次定时器的角度来看，当我们要在点击一次定时器的时候，是不是要先将上一个定时器清一下，再开始？），需要清掉上一个计时器，这样的话就不会出现定时器速度加快的问题了。

JavaScript代码：

<script>
        // 可以将查找标签节点的操作进行简化
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function(){
            var count = 0; //开始计数以后，累加的总秒数
            var timer = null;
            $("start").onclick = function(){
            clearInterval(timer);
                timer = setInterval(function(){// 如果在这个位置写var，相当于timer是这个start点击事件定义的一个变量，在其他点击事件中不能使用
                    count++;
                    // 需要改变页面上的时分秒数
                    $("id_S").innerHTML = showNum(count % 60);
                    $("id_M").innerHTML = showNum(parseInt(count / 60) % 60);
                    $("id_H").innerHTML = showNum(parseInt(count / 3600 ));
                },1000);
            }
            $("pause").onclick = function(){
                // 取消定时器
                clearInterval(timer);
            }
            $("end").onclick = function(){
                clearInterval(timer);
                // 将数据清零
                count = 0;
                // 将当前页面展示数据清零
                $("id_S").innerHTML = "00"
                $("id_M").innerHTML = "00"
                $("id_H").innerHTML = "00"
            }
        }
            // 处理单个数字
            function showNum(num){
                if(num<10){
                    return "0" + num;
                }else{
                    return num;
                }
            }
    </script>

其他函数讲解：

1.因为要多次获取标签，所以可以将获取标签这句代码用一个符号封装起来，（符号里面好像只能用$符号，大家可以尝试一下），

2.showNum函数：将所有数据都以两位数的形式来表示，如果没有showNum函数，当num为个位数时，前面会没有0 ，加了0有更好的体验效果。

【注】：至于为什么要在script里面使用window.onload？

代码是顺序执行的，也就是从上往下，很明显是先执行JavaScript代码，在执行HTML代码的，使用window.onload可以避免某些效果出不来。

tingyu_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
前端JavaScript——秒表实现

秒表实现这一部分主要是通过JavaScript代码来实现的，在这里重点说JavaScript图长这样：页面结构样式代码如下：HTML：<body> <div id="div1"> <div id="count"> <span id="id_H">00</span><span>:</span> <span id="id_M"&.
复制链接

扫一扫

专栏目录