代码如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>验证码</title><style>.box{position:relative;width: 200px;height: 40px;background: #CCC;display: block;margin:150px auto;}.btn{background:#EEE url(1.png) no-repeat;background-position: center center;position:absolute;top:0;width: 40px;height: 40px;z-index: 3;line-height:40px;}.text{position: absolute;width: 100%;margin: 0;line-height:40px;text-align: center;z-index: 2;}.bg{position: absolute;height: 100%;background-color: #7ac23c;z-index: 1;}</style></head><body><div class="box"><!-- 滑块 --><div class="btn"></div><!-- 文字 --><p class="text">请向右滑动滑块</p><!-- 背景 --><div class="bg"></div></div><script>window.onload = function(){//选择器封装var fun2 = function(name){//函数表达式return document.querySelector(name);};var btn = fun2(".btn"),//按钮box = fun2(".box"),//盒子text = fun2(".text"),//文字bg = fun2(".bg"),//背景flag = false;//验证失败//鼠标按下//event 对象 事件的状态btn.onmousedown = function(event){var e = event || window.event;var downX = e.clientX; //按下与X轴的点//移动btn.onmousemove = function(event){var moveX = event.clientX - downX; //移入的距离-按下的距离//移动范围if(moveX > 0){this.style.left = moveX + 'px';bg.style.width = moveX + 'px';//验证成功if(moveX >= (box.offsetWidth - this.offsetWidth)){flag = true; //'验证成功'text.innerHTML = '验证成功';text.style.color = '#fff';btn.onmousemove = null; //清除事件btn.onmousedown = null; //清除事件}}};};//松开btn.onmouseup = function(){btn.onmousemove = null; //清除事件//判断条件if(flag) return;this.style.left = 0;bg.style.width = 0;}}</script></body></html>
