带分的倒计时(原生js)

时间:2023-01-10 10:09:55
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <p>
            <span class="m">10</span>"
            <span class="s">05</span>
        </p>
        <br />
        <br />
        <input type="button" value="开始" />
        
        <script>
            var btn = document.querySelector('input');
            var mText = document.querySelector('.m').innerHTML;
            var sText = document.querySelector('.s').innerHTML;
            var s
            var m
            
            m = goNumber(mText);
            s = goNumber(sText);

            var timer

            btn.onclick=function(){
                if( this.value == '开始' ){
                    timer = setInterval(timeGo,1000);
                    this.value = '暂停';
                }else{
                    clearInterval(timer);
                    this.value = '开始';
                }
            }
            function timeGo(){
                s--
                if( s < 0 ){
                    if( m == 0 ){
                        clearInterval(timer);
                        s++
                    }else{
                        s = 59
                        m--
                        if( m >= 0 && m < 10 ){
                            m = '0' + m;
                        }
                        document.querySelector('.m').innerHTML = m;
                    }
                }
                if( s >= 0 && s < 10 ){
                    s = '0' + s;
                }
                document.querySelector('.s').innerHTML = s;
            }
            
            function goNumber(str){
                var number = parseInt(str);
                return number;
            }
        </script>
        
    </body>
</html>

带分的倒计时(原生js)