表单滑动验证

最新推荐文章于 2024-04-30 13:41:44 发布

DevilAngelia

最新推荐文章于 2024-04-30 13:41:44 发布

阅读量190

点赞数 1

本文链接：https://blog.csdn.net/devilangelia/article/details/118021927

版权

JavaScript 同时被 3 个专栏收录

13 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

滑动验证

效果—↓↓↓
滑动前

滑动中

滑动完成

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>滑动验证</title>
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<style type="text/css">
			.content {
				width: 100%;
			}

			.box {
				margin: 50px auto 0 auto;
				width: 220px;
			}

			.range {
				width: 222px;
				height: 32px;
				border: 1px solid #e4e7ed;
				overflow: hidden;
			}

			.dom {
				width: 220px;
				height: 30px;
				display: flex;
				align-items: center;
				margin-left: 0;
				transform: translateX(-180px);
			}

			.progress-bar {
				background: linear-gradient(45deg, #f43f3b, #ec008c);
				width: 180px;
				height: 30px;
			}

			.button {
				line-height: 30px;
				width: 40px;
				height: 30px;
				text-align: center;
				background: linear-gradient(45deg, #39b54a, #8dc63f);
				color: #ffffff;
				cursor: pointer;
				/* 禁止文本被选中 */
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				-khtml-user-select: none;
				user-select: none;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="box">
				<div class="range">
					<div class="dom" id="domId">
						<div class="progress-bar" id="progress-bar"></div>
						<div class="button" id="buttonId">-></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let button = document.getElementById('buttonId')
		let dom = document.getElementById('domId')
		let progressBar = document.getElementById('progress-bar')
		let clientX = 0, startX = 0, endX = 0;
		let width = progressBar.offsetWidth
		window.onload = function(){
			button.onmousedown =function(ev){//鼠标按下
				startX = ev.clientX
				document.onmousemove = function(ev){//为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件
					endX = ev.clientX - startX
					if (endX < 0) {
						endX = 0
					} else if(endX > width) {
						endX = width
					}
					clientX = endX
					dom.style.marginLeft = clientX + 'px'
				};
				document.onmouseup = function(){//鼠标松开时
					document.onmousemove = null;//把鼠标移动清除
					document.onmouseup = null;//把鼠标松开清除
					if (clientX < width) {
						dom.style.marginLeft = 0
					} else if (clientX == width) {
						alert('验证成功!')
						button.onmousedown = null
					}
				};
				return false;
			};
		}
	</script>
</html>

DevilAngelia

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
表单滑动验证

滑动验证效果—↓↓↓滑动前滑动中滑动完成代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>滑动验证</title> <link rel="stylesheet" type
复制链接

扫一扫