在網上經常看到那種登錄的時候有個滑塊可以拖動，拖到到最右側然後自動登錄的效果，今天我來自己實現一下，大家一起學習。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#progress {
width: 300px;
height: 40px;
background: #ccc;
position: relative;
margin: 100px auto ;
}
#btn{
width: 40px;
height: 40px;
background: red;
position:absolute;
left: 0;
z-index: 10;
/* transition: left 2s; */
}
#bg{
position: absolute;
left: 0;
height: 40px;
background: seagreen;
}
#text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 21;
-moz-user-select: none; -khtml-user-select: none; user-select: none;
}
</style>
</head>
<body>
<div id="progress">
<div id="btn"></div>
<div id="text">請拖動滑塊至最右側</div>
<div id="bg"></div>
</div>
<script>
window.onload = function () {
var _btn = document.querySelector('#btn');
var _progress = document.querySelector('#progress');
var _text = document.querySelector('#text');
var _bg = document.querySelector('#bg');
var flag = false;
_btn.onmousedown = function (e) {
var e = e || window.event;
var initX = e.clientX;
document.onmousemove = function (e) {
var e = e || window.event;
var moveX = e.clientX;
var left = moveX - initX;
var max = _progress.offsetWidth - _btn.offsetWidth;
if (left<0) left = 0
if(left > max) {
left = max;
flag = true;
_text.style.color = '#fff'
_text.innerText = '驗證通過'
this.onmousedown = null;
document.onmousemove = null;
};
_bg.style.width = left+ 'px'
_btn.style.left = left + 'px'
}
}
document.onmouseup = function(e){
if (flag) {
this.onmousedown = null;
document.onmousemove = null;
return;
}else {
var left = parseInt(btn.style.left);
document.onmousemove = null;
var timer = setInterval(() => {
left-=20
btn.style.left=left + 'px'
_bg.style.width = left + 'px'
if (left < 0) {
btn.style.left =0
_bg.style.width=0
clearInterval(timer)
}
},10)
}
}
}
</script>
</body>
</html>