使用原生 JS 制作驗證拖動滑塊
- 一、知識點
-
- 1、字元實體
- 2、offsetWidth 和 clientX
- 二、代碼
- 三、效果
一、知識點
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與大家分享，一起進步，加油。