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

原创
2016/09/02 03:28
阅读数 438

与我上个博客写的有点相似

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
  <script src="http://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
 <!-- <script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>-->
 </head>
 <body>
 <input id="phonenum" type="text" value="18518181818"/>
  <input id="second" type="button"  value="免费获取验证码"  />
 </body>

 <script>
    //发送验证码时添加cookie
function addCookie(name,value,expiresHours){ 
    //判断是否设置过期时间,0代表关闭浏览器时失效
    if(expiresHours>0){ 
        var date=new Date(); 
        date.setTime(date.getTime()+expiresHours*1000); 
        $.cookie(name, escape(value), {expires: date});
    }else{
        $.cookie(name, escape(value));

    }

//修改cookie的值
function editCookie(name,value,expiresHours){ 
    if(expiresHours>0){ 
      var date=new Date(); 
      date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
      $.cookie(name, escape(value), {expires: date});
    } else{
       $.cookie(name, escape(value));

    }


//根据名字获取cookie的值
function getCookieValue(name){ 
     return $.cookie(name);
       
}
$(function(){
    $("#second").click(function (){
        sendCode($("#second"));
    });
    v = getCookieValue("secondsremained");//获取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);//开始倒计时
    }
}
//开始倒计时
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>
</html>
 

展开阅读全文
加载中

作者的其它热门文章

打赏
0
6 收藏
分享
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部