页面按钮禁用与解除禁用的方法

  计时器和延时器的概念

  //--计时器

  // 计时器ID号 setInterval(回调函数, 毫秒数);

  // 每隔指定毫秒数,调用一次回调函数

  // clearInterval(计时器ID号)

  // 停止指定ID号的计时器(实际上是销毁释放资源了)

  //--延时器

  // 延时器Id号 setTimeout(回调函数, 毫秒间隔)

  // 从调用开始,等待指定毫秒数后调用一次回调函数,结束

  // 使用clearTimeout清除延时器

  效果图:

  页面打开后会出现下图:之后按钮value值每过1秒 数字减小1直至0停止 按钮内容变为同意

页面按钮禁用与解除禁用的方法

  实现代码:

  

复制代码 代码如下:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <style type="text/css">

  #btn

  {

  width:200px;

  height:50px;

  background -color:gary;

  }

  </style>

  <script type="text/javascript">

  onload = function () {

  //获得该button对象

  var btn = document.getElementById('btn');

  //创建计时器 返回计时器ID

  var intervalId = setInterval(function () {

  var waitSecond = parseInt((/\d+/).exec(btn.value));//利用RegExp.exec()方法,返回匹配的字符串内容

  waitSecond--;//时间--

  if (waitSecond >= 0) {//判断

  btn.value=btn.value.replace(/\d+/, waitSecond) //利用string.repleace(RegExp,code)方法替换按钮value中数字,并返回替换结果

  } else {

  btn.value = '同意';//将按钮value值改为同意

  btn.disabled = false;//将按钮disabled值改为false

  clearInterval(intervalId);//清除计时器

  }

  }, 1000);

  };

  </script>

  </head>

  <body>

  <input type="button" name="name" value="请仔细阅读5秒后点击同意继续" id="btn" disabled="disabled"/>

  </body>

  </html>