js 实现 ---- 秒表

最新推荐文章于 2021-07-29 15:25:38 发布

王濤

最新推荐文章于 2021-07-29 15:25:38 发布

阅读量242

点赞数 1

分类专栏： js 文章标签： javascript html css css3

本文链接：https://blog.csdn.net/Anber_wang/article/details/105235720

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

简单的说一下这个秒表，它由开始、暂停、继续、重置4个按钮控制的

话不多说，干活走起

展示图：

HTML && CSS 代码：

        <style>
            *{
                padding: 0;
                margin: 0;
            }
            #div1{
                width: 400px;
                height: 600px;
                background-color: hotpink;
                margin: 100px auto;
                font-size: 20px;
                border-radius: 50px;
                text-align: center;
            }
            #div1 div{
                box-sizing: border-box;
                text-align: center;
                padding-top: 120px;
                margin-bottom: 120px;
            }
            #div1 div span{
                width: 50px;
                height: 50px;
                background-color: cyan;
                display: inline-block;
                vertical-align: middle;
                margin: 0 10px;
                border-radius: 10px;
                text-align: center;
                line-height: 50px;
                font-size: 30px;
            }
            button{
                width: 100px;
                height: 50px;
                font-size: 20px;
                margin: 20px 20px;
                border-radius: 20px;
                /* border: none; */
                
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div>
                <span>00</span>时 <span>00</span>分 <span>00</span>秒
            </div>
            <button>开始</button>
            <button>暂停</button><br>
            <button>继续</button>
            <button>重置</button>
        </div>
    <body>

JavaScript 代码：

        <script>
            // 获取按钮
            var oBth0 = document.querySelectorAll('button')[0];
            var oBth1 = document.querySelectorAll('button')[1];
            var oBth2 = document.querySelectorAll('button')[2];
            var oBth3 = document.querySelectorAll('button')[3];
            // console.log(oBth0);

            // 获取时分秒的输入框属性值
            var oSp0 = document.querySelectorAll('span')[0]
            var oSp1 = document.querySelectorAll('span')[1]
            var oSp2 = document.querySelectorAll('span')[2]

            // 设定 初始值
            var start = 0;
            // 设定 定时器 的值
            var now = 0;
            // 创建 开始按钮 的点击事件
            
            oBth0.onclick = function () {
                now = setInterval(function () {
                    start++;
                    var oSp0Hour = parseInt(start / 60 / 60); //总秒数除以分、秒，得整数就是 小时数
                    var oSp1Min = parseInt((start / 60) % 60); //获取 分钟数
                    var oSp2Sec = parseInt(start % 60); //获取秒数  ，总秒数除以 60 ，取余得秒

                    //个位数时 数值前面 加一个 ‘0’ 
                    // 时
                    if (oSp0Hour < 10) {
                        oSp0.innerHTML = '0' + oSp0Hour;
                    } else {
                        oSp0.innerHTML = oSp0Hour;
                    }
                    // 分
                    if (oSp1Min < 10) {
                        oSp1.innerHTML = '0' + oSp1Min;
                    } else {
                        oSp1.innerHTML = oSp1Min;
                    }
                    // 秒
                    if (oSp2Sec < 10) {
                        oSp2.innerHTML = '0' + oSp2Sec;
                    } else {
                        oSp2.innerHTML = oSp2Sec;
                    }
                }, 1000)
            }

            // 创建 暂停按钮 的点击事件
            oBth1.onclick = function(){
                clearInterval(now);
            }
            // 创建 继续按钮 的点击事件
            oBth2.onclick = function(){
                now = setInterval(function () {
                    start++;
                    var oSp0Hour = parseInt(start / 60 / 60); //总秒数除以分、秒，得整数就是 小时数
                    var oSp1Min = parseInt((start / 60) % 60); //获取 分钟数
                    var oSp2Sec = parseInt(start % 60); //获取秒数  ，总秒数除以 60 ，取余得秒

                    //个位数时 数值前面 加一个 ‘0’ 
                    // 时
                    if (oSp0Hour < 10) {
                        oSp0.innerHTML = '0' + oSp0Hour;
                    } else {
                        oSp0.innerHTML = oSp0Hour;
                    }
                    // 分
                    if (oSp1Min < 10) {
                        oSp1.innerHTML = '0' + oSp1Min;
                    } else {
                        oSp1.innerHTML = oSp1Min;
                    }
                    // 秒
                    if (oSp2Sec < 10) {
                        oSp2.innerHTML = '0' + oSp2Sec;
                    } else {
                        oSp2.innerHTML = oSp2Sec;
                    }
                }, 1000)
            }
            // 创建 重置按钮 的点击事件
            oBth3.onclick = function(){
                // 将 数值重新赋值
                start = 0;
                // 停止 定时器
                clearInterval(now);
                // 重新给 时、分、秒 赋值
                oSp0.innerHTML = '00';
                oSp1.innerHTML = '00';
                oSp2.innerHTML = '00';
            }
        </script>

王濤

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 实现 ---- 秒表

简单的说一下这个秒表，它由开始、暂停、继续、重置4个按钮控制的话不多说，干活走起展示图：HTML && CSS 代码： <style> *{ padding: 0; margin: 0; } ...
复制链接

扫一扫

专栏目录