php滑动条验证实例,JavaScript实现前端滑块验证效果（代码实例）

本篇文章就给大家介绍JavaScript实现前端滑块验证效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

1、前端页面应用滑块验证可以防止页面频繁向后台请求数据；

2、主要用到js事件：

onmousedown()：鼠标按下时响应

onmousemove()：鼠标移动时响应

onmouseup() ： 鼠标弹起时响应

3、获取页面距离的语句：e.clientX

obj.offsetWidth

obj.offsetLeft

4、代码：

html:

滑块验证

>>

css:*{

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.box{

position: relative;

width:300px;

height:30px;

background-color: #ccc;

margin:20px auto;

font-size:14px;

line-height:30px;

box-sizing:border-box;

z-index:1;

}

.txt{

position: absolute;

left: 50%;

top:0;

transform: translateX(-50%);

color:blue;

z-index:3;

}

.btn{

position: absolute;

top:0;

left: 0;

width:40px;

height:30px;

border:1px solid #ccc;

background-color: #fff;

text-align: center;

line-height: 30px;

cursor: move;

box-sizing: border-box;

z-index:4;

}

.bg{

position: absolute;

left: 0;

top:0;

width:0;

height:30px;

background-color:green;

box-sizing: border-box;

z-index:2;

}

js:window.onload = function(){

var box = document.querySelector(".box"),

txt = document.querySelector(".txt"),

btn = document.querySelector(".btn"),

bg = document.querySelector(".bg"),

end = false;

btn.onmousedown = function(e){

var e = e || window.event;

var point = e.clientX - box.offsetLeft;

btn.onmousemove = function(e){

var moveW = e.clientX - box.offsetLeft - point;

btn.style.left = moveW + "px";

bg.style.width = moveW + "px";

if(btn.offsetLeft<=0){

btn.style.left = "0";

}

if(btn.offsetLeft>=(box.clientWidth - btn.clientWidth)){

btn.style.left = box.clientWidth - btn.clientWidth

txt.innerHTML = "验证完成";

btn.onmousemove = null;

btn.onmousedown = null;

end = true;

}

}

btn.onmouseup = function(){

btn.onmousemove = null;

if(!end){

btn.style.left = "0";

bg.style.width = "0";

}

}

}

}

总结：以上就是本篇文的全部内容，代码很简单，大家可以动手试试。希望能对大家的学习有所帮助，更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！