案例：发送短信

//案例分析
/*
1.点击按钮 会禁用disabled 为ture
2.同时按钮里面的内容会变化 注意button里面的内容通过 innerHTML修改
3.里面的内容是由变化的 因此需要用定时器
4.定义一个变量 在定时器里面不断递减
5.如果变量为0 我们要停止计时 clearInterval 并且复原 按钮初始状态
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入电话号码" >
    <button>点击发送</button>
    <script>
        //案例分析
        /* 
        1.点击按钮 会禁用disabled 为ture
        2.同时按钮里面的内容会变化 注意button里面的内容通过 innerHTML修改
        3.里面的内容是由变化的 因此需要用定时器
        4.定义一个变量 在定时器里面不断递减
        5.如果变量为0 我们要停止计时 clearInterval 并且复原 按钮初始状态
         */
        var button = document.querySelector('button');
        var time = 10;
        button.addEventListener('click',function(){
            this.disabled = true;
            var timer = setInterval(function(){
                button.innerHTML =  "请等待" + time + "秒" ;
                time--;
                if(time == 0){
                    clearInterval(timer);
                    button.disabled = false;
                    button.innerHTML = '点击发送';
                }
            },1000)
        })



    </script>
</body>
</html>

 

posted @ 2020-06-05 15:14  qiuqiu95  阅读(149)  评论(0)    收藏  举报