4 验证码 （思路+代码）小案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

要求： 

一、css

二、html

三.js

效果：

---

---

要求： 

输入验证码后点击button后，button陷入5s倒计时  期间button不能被选中，直到 倒计结束 ，恢复

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、css

无

二、html

<input type="text"placeholder="请输入验证码">
    <button>发送验证码</button>

三.js

 <script>
        // 2获取
                var input=document.querySelector('input')
                var btn =document.querySelector('button')

                // 3为button添加事件
                // 4设置全局变量 count\timer
                var count
                var timer
                btn.onclick=function (){
                    count=5
                    btn.innerHTML=5+'s'
                    btn.disabled=true
                    timer=setInterval(go,1000)


                }

                    function go(){
                        count--
                        btn.innerHTML=count+'s'
                        if(count==0){
                            clearInterval(timer)
                            btn.innerHTML="发送验证码"
                            btn.disabled=false
                        }
                    }
    </script>

---

效果：

1

2倒计时

3

 

4恢复