JS实现挑战10秒

花落(→)凋谢

于 2020-11-06 22:12:26 发布

阅读量817

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_41605893/article/details/109540131

版权

前端专栏收录该内容

9 篇文章

订阅专栏

JS实现挑战10秒主要用到setInterval计时器

效果图## 完整代码

<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<p style="font-size: 2em;color: blue;font-style: italic;">挑战10.00秒</p>
<p id="time" style="font-size: 2em;color: red;">00:00</p>
<input type="button" value="开始" onclick="oStart()">
<input type="button" value="结束" onclick="oStop()">
<input type="button" value="重置" onclick="oReset()">
<script>
    var n= 0, timer=null;
    var txt=document.getElementById("time");
    //开始计时
    function oStart() {
        clearInterval(timer);
        timer=setInterval(function () {
            n++;
            var m=parseInt(n/60);
            var s=parseInt(n%60);
            txt.innerText=toDub(m)+":"+toDub(s);
        },1000/60);
    };
    //暂停并且清空计时器
    function oStop() {
        clearInterval(timer);
//      txt.innerText="我爱你";
    }
    //重置
    function oReset() {
         txt.innerText="00:00";
        n=0;
    }
    //补零
    function toDub(n){
        return n<10?"0"+n:n;
    }
</script>
</body>
</html>