html实现滑块拖动验证

html代码部分：

<div id="wrapper">
			<div id="drop_box">
				<span class="iconfont icon-jiantouyou" id="spanBox"></span>
			</div>
			<p id="text">拖动滑块验证</p>
			<div id="bg">
				
			</div>
		</div>

CSS部分：

*{
				margin: 0;
				padding: 0;
			}
			#wrapper{
				width: 300px;
				height: 30px;
				background: #9F9F9F;
				text-align: center;
				line-height: 30px;
				margin: 20px auto;
				position: relative;
			}
			#drop_box{
				width: 40px;
				height: 30px;
				background-color: #ddd;
				position: absolute;
				z-index:1000
			}
			#bg{
				height: 30px;
				background: #0BB20C;
				position: absolute;
				left: 0px;
				top: 0px;
			}
			#text{
				position: relative;
				z-index: 999;
			}	

JS部分：

window.onload = function(){
				var dropBox = document.querySelector('#drop_box');
				var wrapper = document.querySelector('#wrapper');
				var text = document.querySelector('#text');
				var bg = document.querySelector('#bg');
				var spanBox = document.querySelector('#spanBox');
				var classVal = document.getElementById("spanBox").getAttribute("class");
				classVal = classVal.replace("icon-jiantouyou","icon-zhengque");
				var flag = false;//验证是否正确
				dropBox.onmousedown = function(event){
					var downX = event.clientX;//鼠标按下去的clientX
					dropBox.onmousemove = function(event){
						var moveX = event.clientX - downX;//鼠标移动的clientX
						if(moveX > 0){
							this.style.left = moveX + 'px';
							bg.style.width = moveX + 'px';
							if(moveX >= wrapper.offsetWidth - this.offsetWidth ){
								flag = true;
								text.innerText = '通过验证';
								text.style.color = '#fff';
								spanBox.setAttribute("class",classVal );//添加正确通过的icon类
								this.onmousemove = null;//移除移动事件
								this.onmousedown = null;//移除鼠标按下事件
							}
						}
					}
				};
				//松开
				dropBox.onmouseup = function(event){
					this.onmousemove = null;
					if(flag) return;
					this.style.left = 0;
					bg.style.width = 0;
				}
			}