设置倒计时10秒可用的按钮JS函数(转)

最新推荐文章于 2023-11-05 20:50:50 发布

转载最新推荐文章于 2023-11-05 20:50:50 发布 · 237 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Godblessyou/archive/2011/01/13/1934353.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了两种使用JavaScript实现按钮倒计时的方法。第一种方法通过直接操作DOM元素属性完成，第二种方法利用HTML5的标签结合JavaScript定时器实现。这两种方法均可使按钮在设定时间内不可点击，并显示剩余时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一:

<input value="同 意" type="submit" name="rulesubmit" />
<script>
    var secs = 9;  
   var wait = secs * 1000;
   document.bbrules.rulesubmit.value = "同 意(" + secs + ")";
   document.bbrules.rulesubmit.disabled = true;
    function update(num) {
             if(num == (wait/1000)) {
       document.bbrules.rulesubmit.value = "同 意";} 
       else {
       var printnr = (wait / 1000) - num;
       document.bbrules.rulesubmit.value = "同 意(" + printnr + ")";}
       }
   function timer() {
       document.bbrules.rulesubmit.disabled = false;
       document.bbrules.rulesubmit.value = "同 意";}    
   for(i = 1; i<= secs; i++) {
   window.setTimeout("update(" + i + ")",i * 1000);
     }
   window.setTimeout("timer()", wait);  
  
   </script>

方式二:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按钮倒计时</title>

</head>

</body>
<script language="javascript">