`

延时生效的按钮

HTML 
阅读更多
转载：
延时生效的按钮经常在网站注册过程中使用到，其作用主要是为了让用户停留几秒，仔细阅读该网站必须遵守的协议。
基本思路：最初按钮不可用，每隔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>
分享到：
| Javascript中最常用的55个经典技巧[转]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics