使用原生 JS 制作验证拖动滑块
一、知识点
1、字符实体
因为你直接输入字符在不同浏览器可能会编译不出来,使用字符实体可以被浏览器所识别。
值 | 描述 |
---|---|
> ; | > |
&radic ; | √ |
2、offsetWidth 和 clientX
说明:
offsetWidth 属性是一个只读属性,它返回该元素的像素宽度,宽度包含内边距(padding)和边框(border),不包含外边距(margin),是一个整数,单位是像素px。
clientX 事件属性会返回当事件被触发时,鼠标指针向对于浏览器页面(或客户区)的水平坐标。
二、代码
<!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>验证码滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 500px;
}
.drag {
width: 300px;
height: 40px;
line-height: 40px;
background-color: #e8e8e8;
position: relative;
margin: 10px auto;
}
.bg {
width: 40px;
height: 100%;
position: absolute;
background-color: aqua;
}
.text {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
/* 不允许选中文字 */
user-select: none;
}
.btn {
box-sizing: border-box;
width: 40px;
height: 40px;
position: absolute;
border: #ccc 1px solid;
cursor: move;
text-align: center;
/* 不允许选中文字 */
user-select: none;
color: #666;
background-color: white;
font-family: '宋体';
}
</style>
</head>
<body>
<div class="drag">
<div class="bg"></div>
<div class="text">请拖动滑块验证</div>
<div class="btn">>></div>
</div>
<script>
/* 一、定义全局变量*/
//定义封装dom操作的$函数
var $ = function (selector) {
return document.querySelector(selector);
},
box = $(".drag"),//容器
bg = $(".bg"),//背景
text = $(".text"),//文字
btn = $(".btn"),//滑块
success = false,//是否通过验证(默认)
distance = box.offsetWidth - btn.offsetWidth;//滑动成功的宽度(距离)
/*二、给滑块注册鼠标按下事件*/
btn.onmousedown = function (e) {
//1.鼠标按下之前必须清除掉后面设置的过渡属性,否则下一次拖动也会存在过渡
btn.style.transition = "";
bg.style.transition = "";
//2.当滑块位于初始位置时,得到鼠标按下时的水平位置
var e = e || window.event;
var downX = e.clientX;
/*三、给文档注册鼠标移动事件*/
document.onmousemove = function (e) {
var e = e || window.event;
//1.获取鼠标移动后的水平位置
var moveX = e.clientX;
//2.得到鼠标水平位置的偏移量(鼠标移动时的位置 - 鼠标按下时的位置)
var offsetX = moveX - downX;
//3.在这里判断一下:鼠标水平移动的距离 与 滑动成功的距离 之间的关系
if (offsetX > distance) {
offsetX = distance;//如果滑过了终点,就将它停留在终点位置
} else if (offsetX < 0) {
offsetX = 0;//如果滑到了起点的左侧,就将它重置为起点位置
}
//4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
btn.style.marginLeft = offsetX + "px";
bg.style.width = offsetX + "px";
//如果鼠标的水平移动距离 = 滑动成功的宽度
if (offsetX == distance) {
//1.设置滑动成功后的样式
text.innerHTML = "验证通过";
text.style.color = "#fff";
btn.innerHTML = "√";
btn.style.color = "green";
bg.style.backgroundColor = "lightgreen";
//2.设置滑动成功后的状态
success = true;
//成功后,清除掉鼠标按下事件和移动事件(因为移动时并不会涉及到鼠标松开事件)
btn.onmousedown = null;
document.onmousemove = null;
//3.成功验证后的回调函数(模拟ajax请求)
setTimeout(function () {
alert('验证成功!');
}, 100);
}
/*四、给文档注册鼠标松开事件*/
document.onmouseup = function (e) {
//如果鼠标松开时,没有滑到了终点,则验证不通过
if (!success) {
//将滑块复位(设置了1s的属性过渡效果)
btn.style.marginLeft = 0;
bg.style.width = 0;
btn.style.transition = "all 1s";
bg.style.transition = "all 1s";
}
//只要鼠标松开了,说明此时不需要拖动滑块了,那么就清除鼠标移动和松开事件。
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
</body>
</html>
三、效果
以上就是使用原生 JS 制作验证拖动滑块,请大家关注《前端小组件》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享,一起进步,加油。