分享到:

JS发送手机验证码倒计时特效

日期:2017-01-09 14:11:00     阅读:152     文章来源:源美设计     标签:深圳网站建设,验证码倒计时

我们在网站建设中,比喻会员注册等需要用到的发送手机验证码倒计时效果,具体请看如下:

第一种:普通效果,刷新页面倒计时失效

<script type="text/javascript">  

var InterValObj; //timer变量,控制时间  

var count = 120; //间隔函数,1秒执行  

var curCount;//当前剩余秒数  

function sendMessage() {  

    curCount = count;  

    var phone=$("#mob").val();//手机号码  

    if(phone != ""){  

        //产生验证码  

        //设置button效果,开始计时  

        $("#btnSendCode").attr("disabled", "true");  

        $("#btnSendCode").val(curCount + "秒后可重发验证码");  

        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次  

    //向后台发送处理数据  

        $.ajax({  

            type: "POST", //用POST方式传输  

            dataType: "text", //数据格式:JSON  

            url: '/pims/send.php', //目标地址  

            data: "phone=" + phone,  

            error: function (XMLHttpRequest, textStatus, errorThrown) { },  

            success: function (msg){ 

//alert(msg);

}  

        });  

    }else{  

        alert("手机号码不能为空!");  

    }  

}  

//timer处理函数  

function SetRemainTime() {  

    if (curCount == 0) {                  

        window.clearInterval(InterValObj);//停止计时器  

        $("#btnSendCode").removeAttr("disabled");//启用按钮  

        $("#btnSendCode").val("重新发送验证码");  

        code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效      

    }  

    else {  

        curCount--;  

        $("#btnSendCode").val(curCount + "秒后可重发验证码");  

    }  

}  

</script> 


<input type='text' name='mob' id="mob">

<input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" />

<input type='text' name='mobcode' class='inputxt' datatype='*' nullmsg='手机验证码不能留空!'>


第二种:使用js操作cookie实现防页面刷新

<input id="second" type="button"  value="免费获取验证码"  />

<script>

//发送验证码时添加cookie

function addCookie(name,value,expiresHours){ 

    var cookieString=name+"="+escape(value); 

    //判断是否设置过期时间,0代表关闭浏览器时失效

    if(expiresHours>0){ 

        var date=new Date(); 

        date.setTime(date.getTime()+expiresHours*1000); 

        cookieString=cookieString+";expires=" + date.toUTCString(); 

    } 

        document.cookie=cookieString; 

//修改cookie的值

function editCookie(name,value,expiresHours){ 

    var cookieString=name+"="+escape(value); 

    if(expiresHours>0){ 

      var date=new Date(); 

      date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒

      cookieString=cookieString+";expires=" + date.toGMTString(); 

    } 

      document.cookie=cookieString; 

//根据名字获取cookie的值

function getCookieValue(name){ 

      var strCookie=document.cookie; 

      var arrCookie=strCookie.split("; "); 

      for(var i=0;i<arrCookie.length;i++){ 

        var arr=arrCookie[i].split("="); 

        if(arr[0]==name){

          return unescape(arr[1]);

          break;

        }else{

             return ""; 

             break;

         } 

      } 

       

}

/*业务逻辑*/

$(function(){

    $("#second").click(function (){

        sendCode($("#second"));

    });

    //v = getCookieValue("secondsremained");//获取cookie值

v = getCookieValue("secondsremained")?getCookieValue("secondsremained"):0;//获取cookie值

    if(v>0){

        settime($("#second"));//开始倒计时

    }

})

//发送验证码

function sendCode(obj){

    var phonenum = $("#phonenum").val();

    var result = isPhoneNum();

    if(result){

        doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});

        addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s

        settime(obj);//开始倒计时

    }

}

//将手机利用ajax提交到后台的发短信接口

function doPostBack(url,backFunc,queryParam) {

    $.ajax({

        async : false,

        cache : false,

        type : 'POST',

        url : url,// 请求的action路径

        data:queryParam,

        error : function() {// 请求失败处理函数

        },

        success : backFunc

    });

}

function backFunc1(data){

    var d = $.parseJSON(data);

    if(!d.success){

        alert(d.msg);

    }else{//返回验证码

        alert("模拟验证码:"+d.msg);

        $("#code").val(d.msg);

    }

}

//开始倒计时

var countdown;

function settime(obj) { 

    countdown=getCookieValue("secondsremained");

    if (countdown == 0) { 

        obj.removeAttr("disabled");    

        obj.val("免费获取验证码"); 

        return;

    } else { 

        obj.attr("disabled", true); 

        obj.val("重新发送(" + countdown + ")"); 

        countdown--;

        editCookie("secondsremained",countdown,countdown+1);

    } 

    setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次

//校验手机号是否合法

function isPhoneNum(){

    var phonenum = $("#phonenum").val();

    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 

    if(!myreg.test(phonenum)){ 

        alert('请输入有效的手机号码!'); 

        return false; 

    }else{

        return true;

    }

}

</script>


第三种:使用localStorage存储验证码,实现防止页面刷新

//业务逻辑

<script>

            $(function() {

                var btn = document.getElementById("btn-getcode");

                //调用监听

                monitor($(btn));

                //点击click

                btn.onclick = function() {

                    //倒计时效果  getCode回调函数  获取验证码api

                    countDown($(this), getCode);

                };


                function getCode() {

                    $.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {

                        if (res.code == 000) {

                            console.log("验证码将发送到你手机");

                        } else {

                            alert(res.message);

                        }

                    });

                }

            });

        </script>


//功能实现

/**

 * 

 * @param {Object} obj  获取验证码按钮

 */

function monitor(obj) {

    var LocalDelay = getLocalDelay();

    var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);

    if (timeLine > LocalDelay.delay) {

        console.log("过期");

    } else {

        _delay = LocalDelay.delay - timeLine;

        obj.text(_delay).addClass("btn-disabled");

        var timer = setInterval(function() {

            if (_delay > 1) {

                _delay--;

                obj.text(_delay);

                setLocalDelay(_delay);

            } else {

                clearInterval(timer);

                obj.text("获取验证码").removeClass("btn-disabled");

            }

        }, 1000);

    }

};



//倒计时效果

/**

 * 

 * @param {Object} obj 获取验证码按钮

 * @param {Function} callback  获取验证码接口函数

 */

function countDown(obj, callback) {

    if (obj.text() == "获取验证码") {

        var _delay = 60;

        var delay = _delay;

        obj.text(_delay).addClass("btn-disabled");

        var timer = setInterval(function() {

            if (delay > 1) {

                delay--;

                obj.text(delay);

                setLocalDelay(delay);

            } else {

                clearInterval(timer);

                obj.text("获取验证码").removeClass("btn-disabled");

            }

        }, 1000);


        callback();

    } else {

        return false;

    }

}

//设置setLocalDelay

function setLocalDelay(delay) {

    //location.href作为页面的唯一标识,可能一个项目中会有很多页面需要获取验证码。

    localStorage.setItem("delay_" + location.href, delay);

    localStorage.setItem("time_" + location.href, new Date().getTime());

}

//getLocalDelay()

function getLocalDelay() {

    var LocalDelay = {};

    LocalDelay.delay = localStorage.getItem("delay_" + location.href);

    LocalDelay.time = localStorage.getItem("time_" + location.href);

    return LocalDelay;

}



文章引用:http://www.szymweb.com/new/192.html

本站文章为深圳网站建设·源美设计原创策划,如有版权纠纷或者违规问题,请联系我们删除,谢谢!

上一篇: 关于thinkphp5的上传、图片处理、多语言处理方法

下一篇: 如何利用jquery实现多条件筛选

返回列表
最新案例
OUR ADVANTAGE WORKS

售后响应及时

全国7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款