lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn1 {
            width: 180px;
            padding: 20px;
            background: #f00;
            color: #ff0;
            text-align: center;
        }
        #btn2 {
            width: 180px;
            padding: 20px;
            background: #00f;
            color: #0f0;
            text-align: center;
            margin-top: 20px;
        }
        #btn3 {
            width: 180px;
            padding: 20px;
            background: #f00;
            color: #ff0;
            text-align: center;
            margin-top: 40px;
        }
        #btn4 {
            width: 180px;
            padding: 20px;
            background: #00f;
            color: #0f0;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="btn1">这是一个开始按钮</div>
    <div id="btn2">这是一个结束按钮</div>
    <div id="btn3">这是一个新的按钮</div>
    <div id="btn4">这是一个旧的按钮</div>
    <!-- 
        setInterval 定时器 规定时间内执行函数  setInterval(函数,时间)
        clearInterval 清除定时器
        setTimeout  延时器 规定时间后执行一次函数 setTimeout(函数,时间)
     -->
    <script>
        // window.alert() => alert()
        //  window.alert("警告框");
        // window.confirm() => confirm()
        //  window.confirm("确认框");
        // window.prompt() => prompt()
        //  window.prompt("提示框");
        var timer1;
        // 获取按钮
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function() {
           timer1 = setInterval(function(){
                console.log("执行一次")
            },500)
        }
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function() {
            clearInterval(timer1)
        }   
        var timer2;
        var btn3 = document.getElementById("btn3");
        btn3.onclick = function() {
          timer2 = setTimeout(function(){
                console.log("这是新的按钮");
            },3000)
        }
        var btn4 = document.getElementById("btn4");
        btn4.onclick = function() {
            clearTimeout(timer2);
            alert("成功了");
        }
    </script>
</body>
</html>