SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYOE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{width:100px;height:50px;border:1px dashed silver;}
        p{text-align:center;}
    </style>
    <script>
        
        window.onload=function(){
            var n=5;
            var colors=["red","orange","blue","silver","gray","green"];
            var timer1=null;
            var timer2=null;
            var oBtn=document.getElementsByTagName("input");
            var oDiv=document.getElementsByTagName("div")[0];
            var i=0;
            //设置定时器,重复执行函数countdow
            oBtn[0].onclick=function(){
            
                clearInterval(timer1);
                clearInterval(timer2);//每点击一次start,清除一次定时器
                timer1=setInterval(colorChange,1000);
                timer2=setInterval(countdown,1000);
            }
            oBtn[1].onclick=function(){
                clearInterval(timer1);
                clearInterval(timer2);
            }
        
            function countdown(){
                if( n>=0){
                    document.getElementById("num").innerHTML=n;
                    n--;
                }else{
                    n=5;
                } 
            }
            function colorChange(){
                oDiv.style.backgroundColor=colors[i];
                i++;
                i=i%colors.length;    
            }
        }
    </script>

</head>
<body>
    <div>
    <p>倒计时:<span id="num">5</span></p>
    </div>
    <input type="button" value="start">
    <input type="button" value="stop">
</body>
</html>