JQ实现单击按钮 倒计时获取验证码

html

<input type="button" value="获取验证码">

css

 input {
            display: block;
            cursor: pointer;
            margin: 100px auto;
        }

js

var s = 10//预定义总秒数
//按钮单击事件
$("input:button").click(function () {
  $(this).val("还剩10s可重新获取验证码")//单击之后立刻更改按钮val，减少延迟
  $(this).attr("disabled", "true").css("cursor", "not-allowed")//增加不可操作属性
   //定时器
   var timer = setInterval(function () {
     s--//衔接之前更改的秒数
     $("input:button").val("还剩" + s + "s可重新获取验证码")
        //如果秒数为0，关闭定时器
     if (s == 0) {
       clearInterval(timer)
        //修改按钮val
         $("input:button").val("重新获取验证码")
         //去除不可操作属性
        $("input:button").removeAttr("disabled").css("cursor","pointer")
        s = 10//因为秒数已经结束了，这里要重新开始，方便下次单击重新获取验证码
             }
       }, 1000)
  })

解释已写在注释里了
如果要加载完页面就执行一次可以添加模拟事件

 $("input:button").trigger("click")//模拟单击事件