console 命令行工具 X clear

console

function TimeCountDown(str){

    var $timeCountDown = document.querySelector('#timeCountDown');
    var $timerShow =  $timeCountDown.querySelector('#timerShow');
    
    var $playBtn =  $timeCountDown.querySelector('#playBtn');
    
    var timer = -1;
    $playBtn.addEventListener('click',()=>{
        if(timer!==-1) return;
        var $timeInput = $timeCountDown.querySelector('#timeInput');
        var inputVal =  $timeInput.value;
        this.start(inputVal);

    })
    var $pauseBtn = $timeCountDown.querySelector('#pauseBtn');
    $pauseBtn.addEventListener('click',()=>{
        this.pause();
    })
    var $resetBtn = $timeCountDown.querySelector('#resetBtn');
    $resetBtn.addEventListener('click',()=>{
        this.reset();
    })

    function showTime(secondeCount){
        var minute = Math.floor(secondeCount/60);
        minute = minute<10?"0"+minute:minute
        var onlySecond =  secondeCount%60;
        onlySecond = onlySecond<10?"0"+onlySecond:onlySecond
        console.log(minute,onlySecond)
        $timerShow.innerText = '00:'+minute+':'+onlySecond
    }

    TimeCountDown.prototype.start = function(inputVal){
        
        console.log(inputVal)
        if(!inputVal) return;
        var secondeCount = 60*Number(inputVal);
        showTime(secondeCount)
        timer = setInterval(()=>{
            secondeCount-=1;
            showTime(secondeCount)
            if(secondeCount===0){
                this.pause();
                timer = -1;
                console.log('时间到！');
            }
           
        },1000)
    }

    TimeCountDown.prototype.pause = function(){
        clearInterval(timer);
    }

    // reset 
    TimeCountDown.prototype.reset = function(){
        this.pause()
        timer = -1;
        $timerShow.innerText = '00:00:00'
    }
}


let td= new TimeCountDown()

<html>
    <body>
	<div id="timeCountDown"">
        <span class='timeBefore'>倒计时</span> 
        <select  id='timeInput' class='timeInput' type='number'>
            <option value="">请选择</option>
            <option value="1">1分钟</option>
            <option value="2">2分钟</option>
            <option value="3">3分钟</option>
            <option value="4">4分钟</option>
            <option value="5">5分钟</option>
            <option value="6">6分钟</option>
            <option value="7">7分钟</option>
            <option value="8">8分钟</option>
            <option value="9">9分钟</option>
            <option value="10">10分钟</option>
        </select>
         <div id='timerShow' class="timerShow">00:00:00</div>

        <div class="controlBtn">
            <span id='playBtn'>开始</span>
            <span id='pauseBtn'>暂停</span>
            <span id='resetBtn'>重置</span>
        </div>
    </div>

   

</body>
</html>

.timeInput{
    font-size: 24px;
    width:100px;
    background:transparent;
    border:none;
    border-bottom: 1px solid #ccc;
    outline: none;
    color:black;
}
.timeBefore{
    font-size: 24px;
    color:black;
}
.timerShow{
    font-size: 40px;
    color:black;
    text-align: center;
    vertical-align: top;
}

.controlBtn{
     color:black;
}

.controlBtn span{
    cursor: pointer;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}
.controlBtn span:hover{
    text-decoration: underline
}