每日学习的代码整理——用JS实现阅读完全部协议之后才允许注册

最新推荐文章于 2024-08-26 12:08:18 发布

原创最新推荐文章于 2024-08-26 12:08:18 发布 · 507 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

本文介绍了一个简单的网页示例，通过JavaScript实现只有当用户滚动到底部阅读完所有注册协议内容后，才能激活注册按钮的功能。该示例利用HTML和CSS进行布局设计，并通过JavaScript监听滚动条的位置来判断用户是否阅读了全部协议。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读完协议之后才可以勾选注册</title>
    <style>
        #info {
            height: 300px;
            width: 250px;
            overflow: auto;
            background-color: #bfa;
        }
    </style>
    <script>
        window.onload = function () {
            // 获取ID名为info的元素
            var info = document.getElementById("info");
            // 获取input元素
            var input = document.getElementsByTagName("input");
            // 为滚动条绑定一个触发事件。
            info.onscroll = function () {
                // 判断滚动条是否滚到了最下面
               // 如果（滚动区域的高度-垂直滚动条滚动的距离 = 可见的高度），则滚动条到最下面
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    // 将input的disabled的值设置为false。
                    input[0].disabled = false;
                    input[1].disabled = false;
                }
            };

        };
    </script>
</head>

<body>
    <form action="">
        <h3>请阅读协议，然后完成注册</h3>
        <p id="info">
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
            请仔细阅读协议，如果勾选，则表示用户同意以上协议，方能注册！
        </p>
        <input type="checkbox" disabled="true">我已仔细阅读，同意。
        <input type="submit" value="注册" disabled="true">
    </form>

</body>

</html>