拖动滑块验证

练习

html:

<div class="box">

<!--滑块-->

        <div class="btn"></div>

<!--文字-->

        <p class="text">拖动滑块验证</p>

<!--背景-->

<div class="bg"></div>

</div>

 

css:

html,body {

padding:0;

margin:0;

/*文本不能选中*/

user-select:none;

}

.box{

position: relative;

width: 300px;

height: 34px;

background-color: #e8e8e8;

line-height: 34px;

margin:20px auto;

}

.bg{

position: absolute;

height: 100%;

background-color: #7ac23c;

z-index:1;

}

.text{

position: absolute;

width: 100%;

margin: 0;

text-align: center;

z-index:2;

}

.btn{

position: absolute;

top:0;

width: 40px;

height: 32px;

z-index:3;

background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==) center no-repeat;

border: 1px solid #ccc;

cursor: pointer;

}

 

js:

 

window.onload = function(){

// 封装公共方法

const $ = function(name){

return document.querySelector(name)

}

var btn = $('.btn')

var box = $('.box')

var text = $('.text')

var bg = $('.bg')

var flag = false //成功标志

// 鼠标事件

btn.onmousedown = function(event){

var clientX = event.clientX

document.onmousemove = function(event){

var newX = event.clientX - clientX

if(newX>0){

btn.style.left = newX+'px'

bg.style.width = newX+'px'

if(newX>=box.offsetWidth-btn.offsetWidth){

text.innerText = '通过验证';

text.style.color = '#fff';

document.onmousedown = null; //清除事件

document.onmousemove = null; //清除事件

flag = true

}

}

}

document.οnmοuseup=function(){

document.onmousemove = null//清除事件

if(!flag){

text.innerText = '拖动滑块验证';

text.style.color = '#000';

btn.style.left = 0

bg.style.width = 0

}

}

}

 

}