倒计时60秒（js）

最新推荐文章于 2022-07-18 22:35:12 发布

原创最新推荐文章于 2022-07-18 22:35:12 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

倒计时专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面包含一个按钮，点击后开始60秒倒计时，倒计时期间按钮不可点击，倒计时结束后按钮恢复初始状态。

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

倒计时60秒

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>倒计时60秒</title>
    <style type="text/css">
        input{display: block;margin: 150px auto;width: 150px;text-align: center;height: 50px;}
    </style>
</head>
<body>
    <input type="button" value="点击" id="btn">
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id)
            };
        var btn = $('btn'),
             nums = 5,//方便查看效果设置为5秒  
             setInt;
            function times(){
                nums--;
                    btn.value = '剩余（'+ nums +'）秒';
                    btn.setAttribute('disabled',true);
                    setInt = setTimeout(times, 1000);
                if ( nums <= 0 ){
                     nums = 5;
                     clearTimeout(setInt);
                     btn.value='重新获取';
                     btn.removeAttribute("disabled");
                }
            }
        btn.onclick=function(){
            times();    
        }
    </script>
</body>
</html>