html页面基于ajax按钮60秒倒计时-CSDN博客

<!DOCTYPE html>

基于ajax按钮动态刷新倒计时

var count = 60;//声明全局变量
$(function(){
var starttime = $.cookie("registertime");//取上次点击按钮发送验证码的时间
if(starttime){//判断是否在该浏览器点击过该按钮
var curtime = new Date().format("yyyyMMddhhmmss");//得到当前时间
var timegaps = timecha(curtime,starttime);//得到上次点击按钮和这次加载页面的时间差（秒）
if(timegaps<60){
count=60-timegaps;//改变count初始值
buttclick();//调用按钮点击事件函数
}
}
});

//按钮点击事件
function buttclick(){
    if(count == 60){//只有计数等于60时才会调用ajax
         $.ajax({
            url:'index.html',
            type:'post',//get
            async:true,//false是否异步
            data:{name:'mingming',age:25},//json格式对象
            timeout:5000,//设置超时时间
            dataType:'json',//返回的数据格式类型json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                console.log(xhr)
                console.log('发送前')
            },
            success:function(data,textStatus,jqXHR){
                $.cookie("registertime",new Date().format("yyyyMMddhhmmss"));//把请求成功的时间设置为上次请求的时间
                console.log(textStatus);//在前端控制台打印请求的状态 
                console.log(data);//在控制台打印当前的数据
            },
            error:function(xhr,textStatus){
                console.log(textStatus);//在前端控制台打印请求的状态
            },
            complete:function(){
                console.log('结束')
            }
        }); 
    }
    
    var obj=$("#butt");//设置按钮上面的字
    if(count==0){
        obj.attr("disabled",false);
                obj.html("免费获取验证码");
        count=60;
                    return;
    }else{
        obj.attr("disabled", true);
        obj.html("重新发送(" + count +"s"+ ")");
        count--;
    }
    
    setTimeout(function(){buttclick()},1000)//仔细一看 这还是js版递归，每一秒钟调用自己一次
}

//计算出时间差的秒数
function timecha(objO,objT){
    var str1=objO.substr(0,10);
    var str2=objT.substr(0,10);
    if(str1!=str2){
        return 70;
    }else{
        var str3=objO.substr(10,2);
        var str4=objT.substr(10,2);
        var str5=objO.substr(12,2);
        var str6=objT.substr(12,2);
        var str7=parseInt(str3)*60+parseInt(str5);
        var str8=parseInt(str4)*60+parseInt(str6);
        return str7-str8;
    }
}
//提供一个得到当前系统时间的字符串
Date.prototype.format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" +                o[k]).length)));
    return fmt;
}

</script>
</head>
<body>
    <span style="color: red;">上面是两个最主要的js，你在引用的js时需要根据你自己的js路径</span><br>
    <span style="color: red;">jquery.min.js</span><br>
    <span style="color: red;">jquery.cookie.js</span><br>
    <span style="color: red;">本页面解决了刷新页面就能重发的问题,如果你刷新页面之后，按钮时间被刷新，你需要看下你的ajax请求是否成功</span><br>
    <label>手机号码</label>：<input id="sjhm" name="sjhm"/><br>
    <button id="butt" onclick="buttclick()" type="button">免费获取验证码</button>


</body>
</html>

转载于:https://www.cnblogs.com/gjmfg/p/6742358.html