计时器JavaScript自己做的小项目，之前自己找没找到，这只是我怕自己忘记了写进去，看着玩就好了。如果有更好的可以发给我

最新推荐文章于 2024-05-20 22:38:25 发布

Zy_xxy

最新推荐文章于 2024-05-20 22:38:25 发布

阅读量208

点赞数

文章标签： html javascript html5

本文链接：https://blog.csdn.net/Zy_xxy/article/details/121559085

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .warp{
            text-align: center;
            padding:0;
            background-color: whitee;
            width:300px;
            height:150px;
            border:10px solid blue;
            border-radius:20px;
        }
        .jsq{
            font-size:50px;
            margin-top:28px;
        }
        .button{
            background-color:blue;
            border-radius:20px;
            width:310px;
            height: 40px;
            border:0;
            position: relative;
            left:-5px;
            bottom:33px;
            color: white;
        }
    </style>
</head>
<body>
<div class="warp">
    <p class="jsq">00:00:00</p>
    <button class="button">计时</button>
</div>
<script>
    // 108.计时器项目研发，点击【计时】按钮开始计时，并将【计时】按钮调整为【暂停】按钮，点击暂停按钮后计时暂停，并将【暂停】按钮调整为【继续】。点击【继续】按钮后从上一次的计时时间节点继续计时。
    /**
     * 1.绑定点击事件
     * 2.找到按钮点击计时按钮开始计时
     * 3.并为计时按钮调整为暂停按钮
     * 4.将暂停按钮调整为继续按钮
     * 5.继续按钮调整为计时
     * 6.for循环0-59每分钟
     * 7.判断时间小于10则+0
     * 8.如果大于10则返回原来的值
     */
    // 1.绑定点击事件
    function f() {
        // * 2.找到按钮点击计时按钮开始计时
        let button=document.querySelector('.button')
        button.addEventListener('click',function(){
            // * 3.并为计时按钮调整为暂停按钮
            if(button.innerText=='计时'){
                button.innerText='暂停'
                js()
            }
            // * 4.将暂停按钮调整为继续按钮
            else if( button.innerText=='暂停'){
                button.innerText='继续'
                zt()
            }
            // * 5.将继续按钮调整为暂停按钮
            else if(button.innerText=='继续'){
                button.innerText='暂停'
                js()
            }

        //
        })

        let Interval
        // * 6.定义一个时间为0
        let seconds=0
        let minutrs=0
        let hours=0

        function js() {
            //定义一个值每秒钟依次加一
            Interval=setInterval(function () {
                //每秒钟加一
                seconds++
                //如果等于秒钟到59则分钟每秒钟加一
                if(seconds==59){
                    seconds=0
                    minutrs++
                }
                // 如果分钟等于59则小时加一
                if(minutrs==59){
                    minutrs=0
                    hours++
                }
                //判断小于10则加0

                //如果小于10返回0加上他自己，如果大于10则返回自己
                let seconds1
                let minutrs1
                let hours1
                if(seconds<10){
                    seconds1="0"+seconds;
                }
                else{
                    seconds1=seconds
                }
                if(minutrs<10){
                    minutrs1= "0"+minutrs;
                }
                else{
                    minutrs1=minutrs
                }
                if(hours<10){
                    hours1="0"+hours;
                }
                else{
                    hours1=hours
                }


                console.log(seconds)
                document.querySelector('.warp .jsq').innerText=hours1+':'+minutrs1+':'+seconds1

            },1000)
        }

        function zt() {
            clearInterval(Interval)

        }
    }

    f()
</script>
</body>
</html>

计时器JavaScript

自己做的小项目，之前自己找没找到，这只是我怕自己忘记了写进去，看着玩就好了

Zy_xxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计时器JavaScript自己做的小项目，之前自己找没找到，这只是我怕自己忘记了写进去，看着玩就好了。如果有更好的可以发给我

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .warp{ text-align: center; padding:0; background-color: whitee; .
复制链接

扫一扫