定时操作应用之——延时生效按钮

最新推荐文章于 2024-08-08 22:32:18 发布

转载最新推荐文章于 2024-08-08 22:32:18 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mikelin/archive/2010/02/03/1662525.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现的延时生效按钮。该按钮初始状态下禁用并显示倒计时，倒计时结束后恢复可用状态。

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

　　ex.html如下：

代码

1 <html>
2 <head>
3 <title>延时生效按钮</title>
4 <style type="text/css">
5     * {margin:0}
6     body {text-align:center;min-width:760px}
7     div {padding:3px 3px 3px 3px}
8     #main {width:720px;margin:0 auto;text-align:left;margin-top:30px}
9 </style>
10
11 <script type="text/javascript">
12     function $(id) {
13         return document.getElementById(id);
14     }
15
16     // 等待时间
17     var remain = 10;
18     function init() {
19         $("btn").innerHTML = "提交(" + (remain--) + "秒)";
20         if(remain>0) {
21             window.setTimeout(init,1000);
22         } else {
23             $("btn").disabled = false;
24             $("btn").innerHTML = "提交";
25         }
26     }
27 </script>
28 </head>
29 <body onload="init()">
30 <div>
31     <button id="btn" disabled="disabled"
32         style="width:150px;height:40px;font-size:large">提交</button>
33 </div>
34 </body>
35 </html>

转载于:https://www.cnblogs.com/mikelin/archive/2010/02/03/1662525.html