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

本文实例为大家分享了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)
    })

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

赞 (0)

相关推荐

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • Vue.js实现移动端短信验证码功能

    Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

  • javascript发送短信验证码实现代码

    javascript发送短信验证码实现代码

    本文首先分析手机发送验证码的原理,再对javascript发送短信验证码予以实现,具体思路如下: 实现点击"发送验证码"按钮后,按钮依次显示为"59秒后重试"."58秒后重试"-直至倒计时至0秒时再恢复显示为"发送验证码".在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件.设置定时器变量和计时变量 第二步.添加定时器,每隔1秒钟计时减 1,直至当计时小于等于 0 时清除定时器,按钮恢复为"发送验证码&quo

  • js验证手机号、密码、短信验证码代码工具类

    本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下 代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;

  • JS实现简单短信验证码界面

    1.要实现短信验证码界面,首先要有一个文本框,旁边是按钮,点击时开始倒计时. 2.先创建文本框和按钮,按钮设置对应的id,然后在js中通过id获取按钮这个元素,对其执行操作.同时应设置倒计时时间以及计时器变量,并使点击发送按钮后倒计时结束前无法继续点击按钮重新发送. 3.倒计时结束后,清除计时器,并使文字改变为"重新发送验证码",恢复对按钮能操作的功能,同时使倒计时的数从5秒重新开始以便点击后重新倒计时. <head> <meta charset="UTF-

  • JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）

    1.功能描述 当用户想要获取验证码时,就点击 免费获取验证码 ,然后开始倒计时,倒计时期间按钮文字为剩余时间x秒,且不可按状态,倒计时结束后,按钮更改为点击重新发送. 2.分析 必须用到定时器.按钮点击后,在定时器内做出判断.倒计时60秒,到0结束. 3.代码实现: 重点介绍:定时器在进行下一次倒计时之前,一定要清除一下,这样的话保证下一次定时器倒计时是正常的. <!DOCTYPE html> <html> <head> <meta charset="U

  • Nodejs实现短信验证码功能

    使用Nodejs的开发者愈来越多,基于Nodejs的后台开发也多了起来,像短信验证码.短信群发.国际短信这些需求,完全可以采用第三方接口来实现,云片就提供了这样的接口. Nodejs // 修改为您的apikey.可在官网(https://www.yunpian.com)登录后获取 var https = require('https'); var qs = require('querystring'); var apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

  • Nodejs 发送Post请求功能(发短信验证码例子)

    直接上代码 sms.js var http = require('http'); var querystring = require('querystring'); function SmsCode() { //发短信 this.send = function (req0, res0) { var code = "3212"; var txt = "您的验证码是:"+code+".请不要把验证码泄露给其他人.如非本人操作,可不用理会!"; var

  • 基于JavaScript短信验证码如何实现

    我们在使用移动.电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码.最近因为某省业务需要,也做了个类似的功能. 原理很简单,就是在用户点击"获取验证码"的时候,Ajax获取一串固定位数的数字,然后写数据库发短信,写Cookie设置验证码的有效期. JS请求验证码如下: $.ajax({ type: "GET", url: "../Ajax/smsrandcodetest.ashx?phone=" + phone.v

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

随机推荐