动手写一个用户注册协议倒计时

最新推荐文章于 2024-03-16 21:20:10 发布

无盐海

最新推荐文章于 2024-03-16 21:20:10 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript DOM 文章标签： DOM HTML JS

本文链接：https://blog.csdn.net/Fanbin168/article/details/12584259

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

DOM

19 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>注册</title>
    <script type="text/javascript">
        //用户有十秒钟的时间看协议，超过十秒钟，“同意”按钮将生效
        var Seconds = 10;
        //计时器ID
        var setIntervalID;
        function ok() {
            var getid = document.getElementById("but");
            if (Seconds <= 0) {
                getid.value="同意";
                getid.disabled = false; //或者写成getid.disabled=""; 启用getid控件。
                //停止计时器
                clearInterval(setIntervalID);

            }
            else {
                getid.value = "请仔细阅读协议还剩下【" + Seconds + "】秒";
            }
            Seconds--;
        }

      setIntervalID=setInterval("ok()", 1000);
        
    </script>
</head>
<body>
<textarea  cols="20" rows="8"></textarea><br />
<!--disabled="disabled" 默认submit表单是禁用的，也就是只读的，不能点击-->
<input type="submit" id ="but" value="同意" disabled="disabled" />

</body>
</html>

方法二

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
    <form action="http://www.helloweba.com/" method="post" name="agree">
        <input type="submit" class="button" value="" name="agreeb">
    </form>
</body>
</html>
<script>
    var secs = 5;
    var si;
    $(function () {
        $(".button").attr("disabled", "disabled");
        $(".button").val("请认真查看<服务条款和声明>(" + secs + ")")
        si = setInterval(a, 1000);
        
    })

    function a() {
       
        $(".button").val("请认真查看<服务条款和声明>(" + (secs-1) + ")");
        if (secs == 0) {
            clearInterval(si);
            $(".button").val("我同意" ).removeAttr("disabled");
        }
        secs--;
    }
</script>

方法三（别人写的高质量代码）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form action="http://www.helloweba.com/" method="post" name="agree">
        <input type="submit" class="button" value="请认真查看<服务条款和声明> (30)" name="agreeb">
    </form> 
</body>
</html>
<script>
    var secs = 30;
    document.agree.agreeb.disabled = true;

    for (var i = 1; i <= secs; i++) {
        window.setTimeout("update(" + i + ")", i * 1000);
    }
    function update(num) {
        if (num == secs) {
            document.agree.agreeb.value = " 我 同 意 ";
            document.agree.agreeb.disabled = false;
        }
        else {
            var printnr = secs - num;
            document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr + ")";
        }
    }

</script>

无盐海

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动手写一个用户注册协议倒计时

注册 //用户有十秒钟的时间看协议，超过十秒钟，“同意”按钮将生效 var Seconds = 10; //计时器ID var setIntervalID; function ok() { var getid = document.getElementById("but");
复制链接

扫一扫

专栏目录