使用JS实现用户协议阅读以及图片-优快云博客

本文链接：https://blog.youkuaiyun.com/th891166/article/details/140672615

在开发过程中，我们想要实现用户在仔细阅读用户协议之后才能注册登录的情况，我们可以用JS来实现这个功能。

当用户协议滚动条到底，并且点击协议时，才能选中登录注册按钮

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户协议</title>
		<style type="text/css">
		#info{
			width: 300px;
			height: 400px;
			background-color: beige;
			overflow: auto;
		}
		
		</style>
		
		<script type="text/javascript">
		/* 
		在某些浏览器或操作系统中，滚动条可能不是完全精确的，导致 scrollTop 的值可能不是完美的整数，
		 或者在滚动到底部时，scrollTop 可能略小于 scrollHeight。
		 这个式子在谷歌浏览器返回的结果是false，精度有问题
		 
		 */
		window.onload=function(){
			/* 
			当垂直滚动条到底时，表单可用 
			onscroll
			    -该属性会在元素滚动条时触发
			 */
			var info=document.getElementById("info");
			var inputs=document.getElementsByTagName("input");
			info.onclick=function(){
				//检查垂直滚动条是否到底
				if(info.scrollHeight-info.scrollTop==info.clientHeight){
					//到底后使表单项可用
		
					inputs[0].disabled=false;
					inputs[1].disabled=false;
				}
			};
		};
		
		</script>
	</head>
	<body>
		<h3>欢迎您！请详细阅读用户手册！</h3>
		<p id="info">
			用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。
			用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。用户在使用本电影APP前，请仔细阅读并理解本协议的全部内容。一旦您开始使用本服务，
			即表示您已阅读、理解并同意接受本协议的所有条款和条件。如果您不同意本协议的任何内容
			，请不要使用本服务。本协议的最终解释权归电影APP所有者所有。如有任何疑问或需要帮助，
			请通过本协议提供的联系方式与我们联系。


		</p>
		<!--为表单项添加disabled=“disabled”属性之后，表单变为不可用状态-->	
		 <input type="checkbox" disabled="disabled"  />我已仔细阅读
		<input type="submit" value="注册"  disabled="disabled"  />
	</body>
</html>

效果图：