html协议简单制作

喵俺第一专栏

于 2022-01-21 21:20:46 发布

阅读量1k

点赞数 1

分类专栏： # Html+css+js项目文章标签： html javascript 前端

本文链接：https://blog.csdn.net/dengfengling999/article/details/122629628

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

当滚动条没有滚动到底是，下方注册按钮无效

如果为表单项添加disable=“disable”表示表单将变成不可用状态

onscroll改事件会在元素的滚动条滚动时触发

disabled属性可以设置一个元素是否禁用，如果设置为true，则表示禁用， false则表示可用

<!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>Document</title>
    <style>
        #info {
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
            /* 显示滚动条 */

        }
    </style>
    <script>
        window.onload = function () {
            //当垂直滚动条滚动到底时表单项可用
            //onscroll改事件会在元素的滚动条滚动时触发，给p标签绑定

            //获取p标签
            var info = document.getElementById("info");
            //获取两个表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定一个滚动条滚动的事件
            info.onscroll = function () {
                //检查滚动条是否滚动到底
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    //滚动到底是表单项可用
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }
            };
        };
    </script>
</head>

<body>
    <h3>欢迎注册信息</h3>
    <p id="info">亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册
        亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读就不能注册

    </p>
    <input type="checkbox" disabled="disabled">我已仔细阅读协议，一定遵守
    <input type="submit" value="注册" disabled="disabled">
</body>

</html>

结果：

喵俺第一专栏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html协议简单制作

当滚动条没有滚动到底是，下方注册按钮无效如果为表单项添加disable=“disable”表示表单将变成不可用状态onscroll改事件会在元素的滚动条滚动时触发disabled属性可以设置一个元素是否禁用，如果设置为true，则表示禁用， false则表示可用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http.
复制链接

扫一扫