javascript html页面如何实现“倒计时后按钮变为可用状态”呢?


摘要:
下文讲述javascript实现倒计时功能,并且倒计时后将按钮设置为可用状态的方法分享,如下所示:

在一些网页中,我们有时候需要页面加载一段时间后,页面的按钮才变为可用状态,
例: 用户注册时,各项协议需过一段时间后,才可勾上复选框,
那么此时就要用到下面的功能

实现思路:
使用setInterval定时函数重复调用js函数,达到倒计时操作的目的
1.定义一个全局的变量s用于存储倒计时时间(秒为单位)
2.定义一个函数,判断全局变量s
当s大于0时,则继续执行递减
当s=0时,则放开按钮可用性和删除定时器
3.定义一个定时器调用此函数


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)---倒计时指定时间后,才可点击按钮</title> 
<script type="text/javascript">
var s=5;
function daoJiShi(){
  var btnSub=document.getElementById("btnSub");
  if(btnSub){
    if(s<=0){
      btnSub.value="按钮可用";
      btnSub.disabled=false;
      clearInterval(id);
    }
    else{
      btnSub.value="请等待5秒中(还剩"+s+"秒)";
      s--;
    }
  }
}
var id = setInterval('daoJiShi()',1000)
</script>
</head>
<body>
<textarea>***********</textarea>
<input id="btnSub" type="button" value="按钮禁用" disabled="true" />
</body>
</html>
javascript setInterval倒计时应用

javascript setInterval倒计时应用