利用HTML实现秒表功能

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

       

        .a{

            background-image: url(https://pic.616pic.com/ys_bnew_img/00/44/96/SrHNIPCVGH.jpg);

            width: 500px;

            height: 500px;

            /* border: 1px solid rgb(0, 255, 157); */

            position:absolute;

            left: 50%;

            margin-left: -400px;

            text-align: center;

            line-height: 100px;

        }

        #showTime

        {

            margin-top: 200px;

            margin-left: 100px;

            color: rgb(1, 7, 12);

            text-align: center;

            width: 300px;

            height: 60px;

            font-size: 60px;

        }

        #startBn{

            width: 60px;

            height: 30px;

            /* margin-top: 300px; */

        }

        #restBn{

            width: 60px;

            height: 30px;

           

        }

    </style>

</head>

<body>

    <div class="a">

        <div id="showTime">00:00:00</div>

        <button id="startBn">启动</button>

        <button id="restBn">复位</button>

    </div>

<script>

    //——————

    var time,showTime,startBn,restBn,pauseDate;

    //布尔开关

    var bool=false;

    //暂停的累计时间

    var pauseTime=0;

    init();

    function init() {

        showTime=document.getElementById("showTime");

        startBn=document.getElementById("startBn");

        restBn=document.getElementById("restBn");

        startBn.addEventListener("click",clickHandler);//开始按钮 ~ 暂停按钮

        restBn.addEventListener("click",clickHandler);//复位按钮

        setInterval(animation,16);

    }

    //转化时间函数

    function animation() {

        if(!bool) return;

        //前时间减去上次开启时间减去暂停累计时间

        var times=new Date().getTime()-time-pauseTime;

        var minutes=Math.floor(times/60000);//毫秒转化为分钟

        var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟

        // 将time减去分钟 除去1000得出 秒

        var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//

        showTime.innerHTML=

            (minutes<10 ? "0" +minutes : minutes)+":"

         +(seconds<10 ? "0"+seconds :seconds)+":"

        +(ms<10 ? "0"+ms : ms);

    }

    //点击时的事件

    function clickHandler(e) {

        e= e || window.event;

       if(this===startBn){

           bool=!bool;

           if(bool){

               this.innerHTML="暂停";

               //如果我们上一次暂停时间是空,表示没有暂停过,因此,直接返回0

               //如果上次的暂停时间是有值得,用当前毫秒数减去上次的毫秒数,这样就会得到暂停时间

               pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);

              if(time) return;

               time=new Date().getTime();

               return;//是为bool判断跳出

           }

           this.innerHTML="启动";

           pauseDate=new Date().getTime();

           return;//是为this是否等于startBn判断跳出

       }

        startBn.innerHTML="启动";

        pauseTime=0;

        pauseDate=null;

        bool=false;

        time=0;

        showTime.innerHTML="00:00:00";

    }

</script>

</body>

</html>

  • 13
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值