在项目中，一般给用户发送完短信后，希望发送按钮能够过60秒后才能再次点击。实现效果图如下：

jquery 倒计时函数 jquery倒计时代码_jquery-倒计时


需要在页面中引入jquery， 实现源码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, width=640px, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
<style type="text/css">
    .w-btn-mark-disable, .w-btn-mark-disable:hover, .w-btn-mark-disable:active{ background-color: #bbbbbb; cursor: default; border-color:#bbb;}

</style>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>


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

<script type="text/javascript">


/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var count = 3; //间隔函数，1秒执行
var curCount;//当前剩余秒数
function sendMessage() {
    curCount = count;
        //设置button效果，开始计时
        $("#btnSendCode").attr("disabled", "true");
        $("#btnSendCode").addClass("w-btn-mark-disable");       
        $("#btnSendCode").val("在" + curCount + "秒内输入验证码");  
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

        //通过ajax异步调用发送短信接口，来判断是否发送成功
        $("#sendFlag").html("发送成功");   

       /*   $.ajax({
               url:"${rootpath}/reSend.html", //后台处理程序
               type:'post',         //数据发送方式
               dataType: 'text',
               data:{userId:userId},
               async: true,
               success:function(data){
                 if(data==0){
                 $("#sendFlag").html("发送成功");   
                 }else{
                 $("#sendFlag").html("发送失败");   
                 }
               }
            }); */  

}
//timer 处理函数
function SetRemainTime() {
    if (curCount == 0) {    
        window.clearInterval(InterValObj);//停止计时器
        $("#btnSendCode").removeAttr("disabled");//启用按钮
        $("#btnSendCode").removeClass("w-btn-mark-disable");        
        $("#btnSendCode").val("重新发送验证码");
        $("#sendFlag").html("");
    }
    else {
        curCount--;
        $("#btnSendCode").val("在" + curCount + "秒内输入验证码");
    }
}


</script>
</body>
</html>