<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >滑动解锁</ title >
< style >
.div1 {
width: 200px;
height: 30px;
border: 1px solid #cccccc;
user-select: none;
position: relative;
margin: 0 auto;
margin-top: 300px;
}
.div2 {
width: 100%;
height: 30px;
}
.div3 {
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 30px;
line-height: 30px;
text-align: center;
background: #fff;
cursor: pointer;
font-family: "宋体";
z-index: 10;
font-weight: bold;
color: #929292;
/* cursor: move; */
}
.div4 {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
line-height: 30px;
text-align: center;
z-index: -1;
background: #ccc;
}
</ style >
</ head >
< body >
<!-- 大盒子 -->
< div class = "div1" id = 'div1' >
< div class = "div2" id = 'div2' ></ div >
< span class = "div3" id = 'div3' >>></ span >
< div class = "div4" id = 'div4' >滑动解锁</ div >
</ div >
< script >
// var a =1,b='1'
// console.log(a+b,a-b,a++,b++)
// const str = 'console.log(1)';
// // replaceAll("\\(.*\\)","");
// const newStr=str.replace[/console\.log/, 'return ']
// console.log(newStr)
var div1 = document.getElementById('div1');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
var left;
var px = div1.offsetWidth - div3.offsetWidth
div3.onmousedown = function (event) {
var event = window.event || ev;
left = event.clientX - div3.offsetLeft;//鼠标按下时的位置
console.log(event)
console.log(left)
document.onmousemove = function (event) {//鼠标移动
var event = window.event || ev;
lefta = event.clientX - left;//鼠标移动的距离
console.log(px, lefta);
if (lefta < 0 ) {
lefta = 0 ;
} else if (px < lefta) {
lefta = px - 2;
}
div3.style.left = lefta + 'px';
}
document.onmouseup = function (event) {//鼠标抬起
var event = window .event || ev;
document.onmousemove = null ;
document.onmouseup = null ;
lefta = event .clientX - left;
if (lefta < 0) {
lefta = 0 ;
span.innerHTML = '滑动解锁' ;
} else if (px < lefta) {
lefta = px - 2;
div4.innerHTML = '解锁成功' ;
div3.innerHTML = '√' ;
div3.onmousedown = null ;
alert('成功')
} else {
lefta = 0 ;
}
div3.style.left = lefta + 'px';
}
}
</script>
</ body >
</ html >
|