19.JavaScript实现一定时长下点击次数

JavaScript实现一定时长下点击次数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="time">
        倒计时：<span>60</span>
    </div>
    <div class="clickNum">
        点击次数：<span>0</span>
    </div>
    <button class="btnClick">点击</button>
    <button class="btnReset">重置</button>
    <script>
        var timer = null,//计时器id
            duration = 60,//倒计时时长
            frequency = 0;//点击次数
        var time = document.querySelector(".time span");
        var clickNum = document.querySelector(".clickNum span");
        var btnClick = document.querySelector(".btnClick");
        var btnReset = document.querySelector(".btnReset");

        btnClick.onclick = function () {
            if (frequency === 0) { //第一次点击开始计时
                startTime();
            }
            if(duration === 0){//倒计时为0
                return;
            }
            frequency++;
            clickNum.innerText = frequency;//记录点击次数
        }

        btnReset.onclick = function(){
            duration = 60;
            frequency = 0;
            clickNum.innerText = frequency;//点击次数重置为0
            time.innerText = duration;//倒计时长重置为60;
            clearInterval(timer);//清除计时器
            timer = null;
        }

        //开始计时
        function startTime() {
            if (timer) { //计时器有值，返回
                return;
            }
            timer = setInterval(function () {
                duration--;
                time.innerText = duration;

                if(duration === 0){
                    clearInterval(timer);
                    timer = null;
                }
            }, 30);
        }
    </script>
</body>

</html>
index.html

效果展示：

 

posted @ 2020-04-29 10:56  lanshanxiao  阅读(413)  评论(0)  编辑  收藏  举报