litle demo(定时验证码)

//首先定义一个flag为true
var flag=true;
//给按钮添加点击事件
$('.btn').click(function(){
  //当flag=false时,点击事件失效  
  if(!flag){
    return false;
  }
  //点击事件生效时,flag=false可以使后续的按钮点击事件失效
  flag=false;
  var time=60;
  //创建一个定时器
  var timer=setInterval(function(){
    //按钮倒计时
    time--;
    //当time=0时,删除定时器,并将true赋给flag,使后续的点击事件生效
    //判定time<=0,是为了防止意外发生,当time小于0时程序依旧能生效
    if(time<=0){
       //将按钮中的文字替换为获取验证码,同时将按钮的背景色改为红色
       $('.btn').html('获取验证码')
      $('.btn').css({"background-color" : 'red'})
      flag=true
       //删除定时器
       clearInterval(timer)
    }else{
      $('.btn').html(time+'S')
      $('.btn').css({"background-color" : '#666'})
    }
  //1000等于1秒
  },1000)
})
posted @ 2018-10-12 17:27  LemonTeaQueen  阅读(152)  评论(0)    收藏  举报