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

注：如对文中的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>

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

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

通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/...
前言 PHP 通过上一篇博客,注册账号与登录页面--前后台数据交互跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...
AJAX实现简单的注册页面异步请求
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...
html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
html登录页面用idea,利用IDEA怎么制作一个登录注册页面
利用IDEA怎么制作一个登录注册页面发布时间:2020-12-19 14:02:09 来源:亿速云阅读:186 作者:Leah 利用IDEA怎么制作一个登录注册页面?很多新手对此不是很清楚,为了帮 ...
android页面布局计算机,Android Studio制作简单计算器App
Android Studio制作简单计算器App 计算机界面如图: 程序设计步骤: (1)在布局文件中声明编辑文件框EditText,按钮Button等组件. (2)在MainActivity中获取组 ...
html手机端在线制作,HTML5制作,手机H5页面制作,H5炫酷效果,前端制作 | 纬博赛特...
前端制作,又称网页重构,即将设计变成页面.万维网,万变不离其宗,归根结底,页面还是HTML. 静态网页制作过程,主要包括三个要素:HTML(标准通用标记语言下的一个应用).级联样式表和JavaScri ...
HTML实现简单的注册页面
HTML是一种标记语言,用于创建网页,这里使用HTML创建了一个简单的注册页面,其中包含表单元素,如文本框.密码框.单选按钮.下拉列表.文件上传和文本域. 先看看效果图: 代码如下: <!DO ...
使用HTML制作简单的新闻页面
这次我们学习的是如何使用HTML制作简单的新闻页面完成效果如下图所示: 进行效果分析制作结构首先打开dw 创新文件夹(前面已经讲过了) 将所要展示的文字输入在<body>标签内水平 ...

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

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

最新文章

热门文章