PHP 必须勾选用户协议,javascript实现用户必须勾选协议实例讲解

最新推荐文章于 2023-07-15 19:44:13 发布
最新推荐文章于 2023-07-15 19:44:13 发布
阅读量871 收藏
点赞数
文章标签： PHP 必须勾选用户协议

JavaScript 滚动事件 表单禁用 用户协议 前端开发
关键词由CSDN通过智能技术生成

在js中设置用户必须阅读完某项协议 才能勾选登陆或注册 (disabled的使用技巧)

仔细观看两张图片画圈部分是不一样的

当滚轮在上面时下面的表单是不可选中的

第二张在底部表单是可选中的

0378693977134b2b86528d7921b6c41f.png

144be375701506630ec36b4bc275666d.png

其中方法为为监听这个滚轮，当滚轮到达底部时 表单变为可选中状态

info.scrollHeight - info.scrollTop == info.clientHeight //判断滚条是否到达了底部

#info{

width: 200px;

height: 500px;

background-color: #00FFFF;

overflow:auto;

}

window.onload = function(){

/*

*垂直滚动条到底时表单项可用

* onscroll

* 该事件会在滚动条滚动时触发

* */

var info = document.getElementById("info");

var inputs = document.getElementsByTagName("input");

info.onscroll = function(){

//检查滚动条是否滚动到底了

if(info.scrollHeight - info.scrollTop == info.clientHeight){

//滚动条到底表单项可用

inputs[0].disabled = false;

inputs[1].disabled = false;

}

}

}

欢迎新用户注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

亲爱的用户请仔细阅读一下协议如果不仔细你将不能成功注册

我已仔细阅读协议,一定遵守

这个方法在chrome中不适用，其它浏览器均可

到此这篇关于javascript实现用户必须勾选协议实例讲解的文章就介绍到这了,更多相关javascript实现用户必须勾选协议内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

币圈沉浮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实例1：设计网页实现用户注册登录功能.zip
06-26
双击已下载好的安装包，点击Run（运行），勾选协议选项，点击next（下一步）按钮 Node.js默认安装目录为"C:\Program Files\node js"，这里可以修改目录，不推荐放在C盘，个人安装在F盘vscode下 测试系统环境变量，...
javascript实现checkbox复选框实例代码
11-29
在实际网页设计中，为了提升用户体验，通常需要对`checkbox`的样式进行美化，并且实现一些高级功能，如全选和取消全选。以下将详细介绍如何使用JavaScript实现这些功能。 首先，我们来关注复选框的美化操作。默认...
js实现用户协议
最新发布
m0_74618370的博客
07-15 222
达到如下效果（用户在五秒后可以点击按钮，并可以实现du'mia）
PHP 必须勾选用户协议,为什么需要网络协议
weixin_36185593的博客
04-02 276
网络协议是网络上所有设备(网络服务器、计算机及交换机、路由器、防火墙等)之间通信规则的集合,它规定了通信时信息必须采用的格式和这些格式的意义。大多数网络都采用分层的体系结构，每一层都建立在它的下层之上,向它的上一层提供一定的服务，而把如何实现这一服务的细节对上一层加以屏蔽，一台设备上的第n层与另一台设备上的第n层进行通信的规则就是第n层协议，在网络的各层中存在着许多协议，接收方和发送方同层的协议必...
JavaScript基础之用户协议倒计时
qq_53593492的博客
04-29 481
用JavaScript实现用户协议倒计时效果
php 提示注册的框,PHP提示框
weixin_29373995的博客
03-11 214
状态是否正常5) 当杀掉app进程后，再开启app，app能否正常启动。6) 出现必须处理的提示框后，切换到后台，再切换回来，检查提示框是否还存在，有时候会出现应用自动跳过提示框的缺陷。7) 对于有数据交换的页面，每个页面都必需要进行前后台切换、锁屏的测试，这种页面最容易出现崩溃来自：博客t(permission, rationale?) 弹出提示框向用户请求某项权限。返回一个promise，最终...
php点击同意协议,php伪协议
weixin_36149065的博客
04-12 173
PHP支持的伪协议file:// — 访问本地文件系统http:// — 访问 HTTP(s) 网址ftp:// — 访问 FTP(s) URLsphp:// — 访问各个输入/输出流(I/O streams)zlib:// — 压缩流data:// — 数据(RFC 2397)glob:// — 查找匹配的文件路径模式phar:// — PHP 归档ssh2:// — Secure Shell ...
【JavaScript源代码】javascript实现用户必须勾选协议实例讲解.docx
12-29
JavaScript 实现用户必须勾选协议的实例讲解是一个常见的前端交互设计，主要应用于用户注册或登录时，确保用户阅读并同意服务条款。在这个实例中，我们使用JavaScript来控制表单元素的禁用状态，只有当用户滚动到...
layui table复选框禁止某几条勾选的实例
10-16
在本文中，我们将深入探讨如何在Layui的表格组件(table)中实现复选框的禁用功能，以便用户无法勾选特定的行。Layui是一个轻量级的前端框架，提供了丰富的UI组件，包括表格，而复选框则是表格中常用的交互元素。 ...
JavaScript应用实例-运行勾选的脚本.js
12-09
JavaScript应用实例-运行勾选的脚本.js
协议注册页面（html+javascript）
07-26
协议注册页面（html+javascript） 简单的 可供学习参考
PHP代码选框打钩,JQuery 进入页面默认给已赋值的复选框打钩
weixin_39918928的博客
03-16 118
效果：JQuery代码：$("#menuTree").find("div span").click(function () {currmenuid = this.id;var currmenuname = LoadCurrMenuName();$('#authName').text(currmenuname);//默认给已赋值的菜单打钩var rightvalue= AutoCheck();var...
Js勾选同意协议教程-更新篇
我的世界
07-13 4367
更新：添加css必要样式 修改js提交后的form提交链接 html添加了form标签 之前是登录的同意协议，现在改为注册同意协议
php判断勾选框代码,checkbox勾选判断代码分析_javascript技巧
weixin_39712969的博客
03-17 203
var xieYi=document.getElementById("xieYi");if(!xieYi.checked){alert("请先阅读并勾选注册协议！");return;}最开始这样写，不过并不是所有的情况都需要勾选这个协议，协议有时不会在前台页面显示，所以改了第二种var xieYi=document.getElementById("xieYi");if(!xieYi== null ...
勾选同意XXX协议，才能点击提交一类的JS页面，源码如下
热门推荐
何必说
06-29 2万+
<html><head><script type="text/javascript">function disable() { document.getElementById("accept").disabled=true }function enable() { document.getElementById("accept").disabled=f..
我们注册时要勾选同意XXX协议，同时协议的标题为一个超链接，只有勾选了同意，才能点击提交。如何实现这个功能，下面是代码。...
weixin_30648587的博客
10-27 4133
<html> <head> <script type="text/javascript"> function disable() { document.getElementById("accept").disabled=true } function enable() { document.getElementById("a...
使用view design实现一个跨页勾选的table
03-26
抱歉，作为AI语言模型，我无法提供视觉设计方案，但我可以向您介绍如何在前端使用Vue.js实现一个跨页勾选的table。 1. 创建Vue实例 首先，我们需要在HTML文件中引用Vue.js文件，并创建一个Vue实例。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Table</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- table code here --> </div> <script src="app.js"></script> </body> </html> ``` app.js文件中： ```javascript new Vue({ el: '#app', data: { selectedRows: [], // 存储选择的行数 items: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页条数 total: 100 // 数据总条数 }, methods: { toggleSelection(row) { // 更新选择的行数 const index = this.selectedRows.indexOf(row); if (index === -1) { this.selectedRows.push(row); } else { this.selectedRows.splice(index, 1); } }, isSelected(row) { // 判断行是否已选择 return this.selectedRows.includes(row); }, onPageChange(page) { // 处理换页事件 this.currentPage = page; // 这里可以根据页码重新获取数据 }, onSelectAll() { // 选择所有行 this.selectedRows = this.items.slice(); }, onClearSelection() { // 取消选择所有行 this.selectedRows = []; } }, computed: { pages() { // 计算总页数 return Math.ceil(this.total / this.pageSize); }, slicedItems() { // 根据分页条件筛选数据 const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.items.slice(start, end); }, isSelectAll() { // 判断是否已选择所有行 return this.selectedRows.length === this.slicedItems.length; } } }); ``` 2. 渲染表格 在Vue实例中，我们可以使用v-for语法渲染表格数据，并绑定勾选事件。 ```html <table> <thead> <tr> <th> <input type="checkbox" v-model="isSelectAll" @change="isSelectAll ? onSelectAll() : onClearSelection()"> </th> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr v-for="row in slicedItems" :key="row.id" @click="toggleSelection(row)" :class="{selected: isSelected(row)}"> <td> <input type="checkbox" :checked="isSelected(row)" @click.stop> </td> <td>{{ row.name }}</td> <td>{{ row.age }}</td> <td>{{ row.gender }}</td> </tr> </tbody> </table> ``` 在表头添加一个全选复选框，并绑定一个computed属性isSelectAll来判断是否已选择所有行，同时定义两个方法onSelectAll和onClearSelection来实现全选和取消选择。在表格中每一行的前列添加一个复选框，通过@click事件绑定toggleSelection方法实现勾选/取消勾选。isSelected方法用于判断当前行是否已被勾选，根据返回值判断是否添加selected类名以实现勾选时的高亮效果。 3. 分页 最后，我们需要实现分页功能。可以使用第三方库如Vue-Pagination实现，也可以自己实现。这里我们在Vue实例中定义currentPage和pageSize来保存当前页码和每页条数，total记录数据总条数。使用computed属性pages计算总页数。在表格底部添加分页组件，并调用onPageChange方法处理页码变化事件。 ```html <template> <div> <table> <!-- table code here --> </table> <pagination :current-page="currentPage" :total="total" :page-size="pageSize" @page-change="onPageChange"/> </div> </template> <script> export default { data() { return { selectedRows: [], // 存储选择的行数 items: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页条数 total: 100 // 数据总条数 }; }, methods: { // table methods here }, computed: { pages() { // 计算总页数 return Math.ceil(this.total / this.pageSize); }, slicedItems() { // 根据分页条件筛选数据 const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; return this.items.slice(start, end); }, isSelectAll() { // 判断是否已选择所有行 return this.selectedRows.length === this.slicedItems.length; } }, components: { pagination } }; </script> ``` 至此，我们已经完成了一个基本的跨页勾选的表格实现，您还可以根据需求自定义样式和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值