<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>滑动解锁</title>
<style>
.div1{
width:200px;
height:30px;
border:1pxsolid#cccccc;
user-select:none;
position:relative;
margin:0auto;
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>
<!--大盒子-->
<divclass="div1"id='div1'>
<divclass="div2"id='div2'></div>
<spanclass="div3"id='div3'>>></span>
<divclass="div4"id='div4'>滑动解锁</div>
</div>
<script>
//vara=1,b='1'
//console.log(a+b,a-b,a++,b++)
//conststr='console.log(1)';
////replaceAll("\\(.*\\)","");
//constnewStr=str.replace[/console\.log/,'return']
//console.log(newStr)
vardiv1=document.getElementById('div1');
vardiv3=document.getElementById('div3');
vardiv4=document.getElementById('div4');
varleft;
varpx=div1.offsetWidth-div3.offsetWidth
div3.onmousedown=function(event){
varevent=window.event||ev;
left=event.clientX-div3.offsetLeft;//鼠标按下时的位置
console.log(event)
console.log(left)
document.onmousemove=function(event){//鼠标移动
varevent=window.event||ev;
lefta=event.clientX-left;//鼠标移动的距离
console.log(px,lefta);
if(lefta<0){
lefta=0;
}elseif(px<lefta){
lefta=px-2;
}
div3.style.left=lefta+'px';
}
document.onmouseup=function(event){//鼠标抬起
varevent=window.event||ev;
document.onmousemove=null;
document.onmouseup=null;
lefta=event.clientX-left;
if(lefta<0){
lefta=0;
span.innerHTML='滑动解锁';
}elseif(px<lefta){
lefta=px-2;
div4.innerHTML='解锁成功';
div3.innerHTML='√';
div3.onmousedown=null;
alert('成功')
}else{
lefta=0;
}
div3.style.left=lefta+'px';
}
}
</script>
</body>
</html>
|