秒表

最新推荐文章于 2021-08-06 20:39:34 发布

hchu

最新推荐文章于 2021-08-06 20:39:34 发布

阅读量408

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78571628

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{font-size: 20px;}
            #container{width:500px;height:140px;background: greenyellow;position:relative;top:100px;left:300px;}
            .button1{font-size: 20px;position: absolute;top: 80px;left: 60px;}
            .button2{font-size: 20px;position: absolute;top: 80px;left: 280px;}
            .box1{position:relative;top: 30px;left: 145px;}
        </style>
        <script type="text/javascript">
            //判断是否开始执行
            var isStart = 0;
            //定时器判断
            var timeId = -1;
            //时间
            var currentTime = 0;
            //开始
            function start(){
                if(isStart == 0){
                    isStart == 1;
                    var hour = document.getElementById("hour");
                    var minute = document.getElementById("minute");
                    var second = document.getElementById("second");

                    timeId = setInterval(function(){
                        //每隔1秒current Time增加1
                        currentTime++;

                        //秒,给60取余,否则会大于秒60
                        var currentsecond = currentTime%60;
                        var currentMinute = Math.floor(currentTime/60%60);
                        var currrentHour = Math.floor(currentTime/60/60);
                        //改变原来的参数
                        if(currentTime<=9){ 
                            second.innerHTML = '0'+currentsecond;
                        }else{
                            second.innerHTML = ''+currentsecond;
                        }
                        hour.innerText = ''+currrentHour;
                        minute.innerHTML = '' + currentMinute;                      
                    },1000) 
                }
            }
            function end(){
                if(timeId != -1){
                    clearInterval(timeId);
                    isStart == 0;
                }
            }               
        </script>
    </head>
    <body>
        <div id="container">
            <div class = 'box1'>
                <span id= 'hour'>00</span>
                <span>时</span>
                <span id = 'minute'>00</span>
                <span>分</span>
                <span id = 'second'>00</span>
                <span>秒</span>
            </div>
            <button class = 'button1' onclick = 'start()'>start_time</button>
            <button class = 'button2' onclick = 'end()'>end_time</button>
        </div>

    </body>
</html>