前端制作简单的“注册页面——阅读协议”页面及效果

Etui۹(･༥･´)و ̑̑

已于 2023-04-08 18:03:30 修改

阅读量3.6k

点赞数 4

分类专栏： JavaScript CSS3 HTML5 文章标签： javascript css html dom

于 2021-04-04 11:09:06 首次发布

本文链接：https://blog.csdn.net/m0_47015897/article/details/115426538

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

注：如对文中的scrollHeight、scrollTop、clientHeight属性有所一伙，请参考博文“JavaScript中元素client、offset、scroll相关属性的应用”（链接：https://blog.csdn.net/m0_47015897/article/details/115426441）

效果图：
在这里插入图片描述
源码及解析：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>client_offset_scroll练习</title>
        <style>
            #tit{
                display: block;
                width: 400px;
                height: 20px;
                margin: 100px auto;
                text-align: center;
            }
            #info{
                margin: 20px auto;
                width: 300px;
                height: 400px;
                overflow: auto;
                border: solid 5px rgb(123, 123, 123, .3);
            }
            #cb{
                margin: 20px auto;
                text-align: left;
                width: 300px;
            }
            #btn{
                display: block;
                margin: 10px auto;
            }
        </style>
        <script>
            window.onload = function(){
                /* 
                    当垂直滚动条到底时使表单项可用
                    onscroll 
                        该事件会在滚动条滚动时触发
                 */
                var info = document.getElementById("info");
                var chec = document.getElementById("chec");
                var btn = document.getElementById("btn");
                info.onscroll = function(){
                    if(info.scrollHeight-info.scrollTop == info.clientHeight){
                        console.log("我滚完了~");
                        chec.disabled = false;
                        btn.disabled = false;
                    }else{
                        chec.disabled = true;
                        btn.disabled = true;
                    }
                }

                btn.onclick = function(){
                    if(chec.checked){
                        alert("恭喜你，注册成功！");
                    }else{
                        alert("请勾“同意该协议“，再进行注册!");
                    }
                }
            }
        </script>
    </head>
    <body>
        <h3 id="tit">亲爱的用户，请阅读以下协议再进行注册！</h1>
        <p id="info">亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
            亲爱的用户，请自习阅读该协议，否则您将无法注册！！
        </p>
        <p id="cb"><input type="checkbox" id="chec" disabled="disabled">
            我已阅读，且同意该协议！</p>
        <button id="btn" disabled="disabled">注册</button>
    </body>
</html>

希望本案例对你有所帮助，加油！

Etui۹(･༥･´)و ̑̑

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
前端制作简单的“注册页面——阅读协议”页面及效果

注：如对文中的scrollHeight、scrollTop、clientHeight属性有所一伙，请参考博文“JavaScript中元素client、offset、scroll相关属性的应用”（链接：https://blog.csdn.net/m0_47015897/article/details/115426441）效果图：源码及解析：<!DOCTYPE html><html> <head> <meta charset="UTF-
复制链接

扫一扫