设计一个发送验证码的案例【DOM】

设计发送验证码案例

DOM部分学习以后，设计一个发送验证码，老样子，先分析，再写代码…

案例分析：

1. 首先搭建好结构，一个输入框一个按钮，按钮上给个值为点击发送验证码
2. 点击以后禁用按钮
3. 点击按钮，按钮上的内容变成，倒计时锁多少秒
4. 设置一个定时器，每隔一秒执行一次，让倒计时减一
5. 判断验证当前倒计时是否已经小于0，如果小于0，那么清除定时器，并且给定时器设置初始内容以及倒计时的初始时间，并且把禁用的按钮给调回来,用：btn.disabled = flase;来实现
6. 如果当前倒计时大于0，那么让时间不断减一即可

直接上代码：

	<input type="text" name="" id="">
    <button>发送验证码</button>

	<script>
        var btn = document.querySelector('button');
        var time = 10;                             // 初始倒计时值
        btn.addEventListener('click', function() {
            this.disabled = 'true';              // 点击以后就禁用按钮
            var timer = setInterval(function() {      // 设计定时器
                if (time == 0) {
                    // 清除定时器，复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    // 重新设置时间,设置为初始时间
                    time = 10;
                } else {
                    btn.innerHTML = '倒计时还剩' + time + '秒';
                    time--;
                }
            }, 1000);
        });
    </script>

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~