问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JS倒计时，关于时间计量转化的问题

头像
chaihongjun
    302679121
    <!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name=renderer content=webkit>
    <!-- some meta tags, important for SEO"-->
    <meta name="description" content="put a short description in here" />
    <meta name="keywords" content="put your important keywords in here" />
    <title>倒计时时钟</title>
    <style type="text/css">
    .container {
        width: 400px;
        height: 100px;
        line-height: 50px;
        background: #000;
        color: #fff;
        margin: 0 auto;
        padding: 30px 10px;
        text-align: center;
    }

    span {
        border: 3px solid #ccc;
        width: 50px;
        padding: 5px;
        height: 30px;
        background: #fff;
        color: #000;
    }

    button {
        display: block;
        margin: 20px auto;
    }

    .on {
        background: red;
    }

    .off {
        background: green;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var btn = document.getElementsByTagName('button')[0];
        var span = document.getElementsByTagName('span');
        var min = parseInt(span[0].innerHTML);
        var second = parseInt(span[1].innerHTML);
        var timer = null;
        btn.onclick = function() {
            if (this.className == 'off') {
                this.className = 'on';
                btn.innerHTML = '取消';
            } else {
                this.className = 'off';
                btn.innerHTML = '启动';
                clearInterval(timer);
            }
            countdown();
            timer = setInterval(countdown, 1000);
        }

        function countdown() { //时间更新
            if (min > 0) {
                if (second > 0) {
                    second--;
                    console.log('second:' + second);
                    span[1].innerHTML = second;
                } else if (second == 0) {
                    min--;
                    console.log('min:' + min);
                    span[0].innerHTML = min;
                    span[1].innerHTML = 59;
                }
            } else if (min == 0) {
                if (second > 0) {
                    second--;
                    console.log('second:' + second);
                    span[1].innerHTML = second;
                } else if (second == 0) {
                    clearInterval(timer);
                }
            }
        }
    };
    </script>
</head>

<body>
    <div class="container">
        <span>01</span> 分种
        <span>5</span> 秒
        <button type="button" class="off">启动</button>
    </div>
</body>

</html>

    这个是一个倒计时时钟，走到0分59秒的时候就不再倒计时了，这是为什么呢？

    javascript
    阅读 2.3k
    5 个回答
    得票最新
    头像
    spencerht
      7.8k2728
      ✓ 已被采纳

      因为你当第一次秒数为0时候，分钟数--，改变了html中的分钟和秒数，但是没有对second赋值，导致其仍为0。

      function countdown() { //时间更新
    if (min > 0) {
        if (second > 0) {
            second--;
            console.log('second:' + second);
            span[1].innerHTML = second;
        } else if (second == 0) {
            min--;
            console.log('min:' + min);
            span[0].innerHTML = min;
            span[1].innerHTML = 59;
            second = 59; // 此处遗漏
        }
    } else if (min == 0) {
        if (second > 0) {
            second--;
            console.log('second:' + second);
            span[1].innerHTML = second;
        } else if (second == 0) {
            clearInterval(timer);
        }
    }
}

      补充：
      取消

      btn.onclick = function() {
    if (this.className == 'off') {
        this.className = 'on';
        btn.innerHTML = '取消';
        // 这里应在判断内进行countdown与setInterval
        countdown();
        timer = setInterval(countdown, 1000);
    } else {
        this.className = 'off';
        btn.innerHTML = '启动';
        clearInterval(timer);
    }
}
      头像
      li_shifeng
        6811616

        min--;
        console.log('min:' + min);
        span[0].innerHTML = min;
        span[1].innerHTML = 59;
        改为：
        min--;
        console.log('min:' + min);
        span[0].innerHTML = min;
        second = 59
        span[1].innerHTML = second;

        头像
        夜影
          1.5k21936

          加个second = 59;在你countdown的第一个else if里

          头像
          zero
            6591417

            你在这个地方：

            span[0].innerHTML = min;
span[1].innerHTML = 59;

            后面补充一个：

            second = 59;

            然后你就能理解为什么了。

            头像
            熊丸子
              5.6k3927
              if (second > 0) {
    second--;
    console.log('second:' + second);
    span[1].innerHTML = second;
} else if (second == 0) {
    clearInterval(timer);
}

              5秒走完的时候，min = 0 ，second = 0(但是span里给你赋了59，让你造成困惑)，so。。。直接走上面的else if 分支，clearInterval(timer);计时器被清除

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题