javascript实现发送短信验证码案例

在 上张贴 由 lianhe发表回复

本文实例为大家分享了javascript实现发送短信验证码的具体代码，供大家参考，具体内容如下

效果如下:

代码思路:

1.按钮点击之后，会禁用disabled 为true
2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改里面秒数         是有变化的，因此需要用到定时器
3.定义一个变量，在定时器里面，不断递减
4.如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

html部分

<div>
        <input type="tel" placeholder="验证码"><button>发送</button>
</div>

css部分:

div {
            width: 570px;
            height: 200px;
            margin: 200px auto;
            font-size: 22px;
        }
 
        input {
            float: left;
            width: 180px;
            height: 25px;
            outline: none;
            border: 1px solid pink;
            padding-left: 10px;
        }
 
        button {
            float: left;
            width: 60px;
            height: 29px;
            line-height: 29px;
            outline: none;
            border: 1px solid pink;
        }

javascript部分

let btn = document.querySelector("button");
let time = 10;
btn.addEventListener('click', function () {
        btn.disabled = true;
 
        let timer = setInterval(function () {
            if (time == 0) {
                // 清除定时器和复原按钮
                btn.disabled = false;
                clearInterval(timer);
                btn.innerHTML = "发送";
                time = 10; //这个10需要重新开始
            } else {
                btn.innerHTML = time + "s"
                time--;
            }
 
        }, 1000)
    })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • javascript发送短信验证码实现代码
  • JS实现用户注册时获取短信验证码和倒计时功能
  • JS实现简单短信验证码界面
  • Vue.js实现移动端短信验证码功能
  • 基于JavaScript短信验证码如何实现
  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
  • js验证手机号、密码、短信验证码代码工具类
  • Nodejs 发送Post请求功能(发短信验证码例子)
  • Nodejs实现短信验证码功能
  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）
张贴在2