前端-js网页特效（二）界面发送验证码后倒计时效果及原理

目录

前言：

一、原理

案例步骤原理

细节部分

二、代码解析

HTML部分：

script部分：

三、实际效果图

 四、结束语

---

前言：

        在日常的微信登录，或者是其他大大小小网站及APP登录的时候，如果是用电话号码快捷登录的话，必不可少需要短信验证，其中在输入验证码一栏的按钮就有  “xx s 后重新获取验证码”  诸如此类的倒计时效果，而利用js的BOM，便可以完美的复现倒计时效果，这也是我倒计时效果写的第二篇分享，可以返回观看倒计时效果应用的第一篇分享：前端-js网页特效（一）倒计时效果及原理https://blog.csdn.net/weixin_57269725/article/details/120679717

一、原理

案例步骤原理

(1).按钮点击之后 会禁用disabled 值为true（这与disabled在css中书写方式不一样，牢记！）

(2).同时按钮里面的内容也会变化，注意 button 里面内容靠innerHTML修改

(3).里面的秒数是变化的 需要用到计时器

(4).定义一个变量 在计时器里面 不断递减

(5).如果变量为0 说明时间到了 我们需要停止计时器 并且恢复按钮初始状态

细节部分

1、当时间位数为个位数，要添加判断条件，额外添加一个“0”以补全位数

2、如果按正常思路书写，会出现按钮点击后第一秒出现延迟一秒的效果，解决方案为：在按钮点击之后，button 里面内容立即用innerHTML修改为（time+1），假如在效果我们设置倒计时10秒，则可以将 time 赋值为9秒，运行后效果便是10秒且未出现延迟（重点牢记）

3、一定要书写禁用！在没有该function()在书写之前没有书写去除计时器，重复点击会出现bug！

在这里先讲一下计时器的书写方式，忘记怎么写的童鞋也可以快速记住！

 //setINterval 
        //语法规范：window.setInterval(调用函数,延时时间)
        //功能描述 该功能实现间隔时间循环调用 而setTimeout 语法只会调用一次
        setInterval(function() {
            alert('我又出现啦~');
        },5000); // 后面的“5000”是以毫秒为单位的，但是可以不写

还是一样，上代码！

二、代码解析

HTML部分：

        发送短信：
        
        发送

script部分：

 var btn = document.querySelector('button');
        var time = 2;
        btn.addEventListener('click',function(){
            btn.disabled = true;         //这里的disabled属性不像css中一样的写法 而是直接等于true
            btn.innerHTML = '还剩'+(time+1)+'秒';  //解决点了按钮之后的延迟   其中  "time+1"  解决了第一秒延迟
            var timer = setInterval(function(){
                if(time==0){
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 2;
                }else{
                    btn.innerHTML = '还剩'+time+'秒';
                    time--;
                }

            },1000);
        })

三、实际效果图

 

 点击按钮之后（由于不知怎么录视频 只能分两张图模拟了 呜呜呜呜呜呜呜呜呜呜呜）

 

 

 四、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 谢谢各位~