js实现阅读完才能勾选或者规定时间后才能勾选

页面效果：（谷歌浏览器有时兼容有时不兼容，只有到底部的时候会偶尔不触发）
1.一开始，注册和勾选框禁用，倒计时隐藏
image.png
2.第一次拉动滚动条，倒计时开始
image.png
3.拉倒底部时（或者倒计时结束），勾选框和注册框激活，可选择，倒计时隐藏。
image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        #info{
            width: 200px;
            height: 500px;
            background-color: #00FFFF;
            overflow:auto;
        }
    </style>
    <script type="text/javascript">
        function tick()
        {
            var time = new Number(document.getElementById("Button1").value);
            if(time>0)
            {
                document.getElementById("Button1").value = time-1;
                window.setTimeout("tick()",1000);
            }
            else
            {
                var btn1=document.getElementById("Button1");
                var inputs = document.getElementsByTagName("input");
                inputs[0].disabled = false;
                inputs[1].disabled = false;
                btn1.style.display = "none";
            }
        }
        window.onload = function(){
            /*
             *垂直滚动条到底时表单项可用
             * onscroll
             * 该事件会在滚动条滚动时触发
             * */
            var info = document.getElementById("info");
            var inputs = document.getElementsByTagName("input");
            var flag=0;
            var btn1=document.getElementById("Button1");
            btn1.style.display = "none";
            info.onscroll = function(){
                //检查滚动条是否滚动到底了
                //alert("block"+i++)
                if(info.scrollTop > 1 && flag==0){
                    //滚动条一滚动
                    flag=1;
                    //alert("开始滑动");
                    var btn1=document.getElementById("Button1");
                    btn1.style.display = "";
                    document.getElementById("Button1").disabled = true;
                    document.getElementById("Button1").value = 10;
                    window.setTimeout("tick()",1000);
                }
                if(info.scrollHeight > info.clientHeight && info.scrollTop + info.clientHeight >= info.scrollHeight){
                    //滚动条到底表单项可用
                    var btn1=document.getElementById("Button1");
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                    btn1.style.display = "none";
                }
            }
        }
    </script>
    <title></title>
</head>
<body>
<h1>欢迎新用户注册</h1>
<p id="info">
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册
    亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册</p>
<input type="checkbox" name="" id="" value="" disabled="disabled"/>我已仔细阅读协议,一定遵守
<input  type="submit" value="注册" disabled="disabled"/><!-- 如果为表单添加disabled="disabled则表单项将变成不可用的状态-->
<INPUT TYPE="button" NAME="Button1" id="Button1">
</body>
</html>
最后编辑于：2020.10.29 10:48:19