延时生效的按钮

最新推荐文章于 2023-09-08 16:02:28 发布

iteye_2903

最新推荐文章于 2023-09-08 16:02:28 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： HTML

本文链接：https://blog.csdn.net/iteye_2903/article/details/81686294

javascript 专栏收录该内容

112 篇文章

订阅专栏

转载：
延时生效的按钮经常在网站注册过程中使用到，其作用主要是为了让用户停留几秒，仔细阅读该网站必须遵守的协议。
基本思路：最初按钮不可用，每隔1秒更改一次按钮的文字，提示剩余时间，当到达指定的时间时，将按钮的状态改为可用（disabled=false）。


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }

        var remain =10;
        function init(){
            $("btn").innerHTML = "提交("+(remain--)+"秒)";
            if(remain>0){
                window.setTimeout(init,1000);
            }
            else{
                $("btn").disabled = false;
                $("btn").innerHTML = "提交";
            }    
        }
        </script>
    </head>
    <body onload="init()">
        <button id="btn" disabled="disabled" >提交</button>
    </body>
</html>