♀ sharing set using native drag the slider verify the effects achieved JS
♀ involves three aspects of knowledge in this group code:
⑴ event processing
⑵ add authentication token
⑶ selecting encapsulator
code show as below:
<!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" >
<-! Slider ->
< div class = "BTN" > </ div >
<-! Text ->
< P class = "text" > Please slide the slider to the right </ the p- >
<-! background ->
< div class = "BG" > </ div >
</ div >
<script>
the window.onload = function () {
// selector package
var fun2 = function (name) { // function expression
return document.querySelector (name);
};
var BTN = fun2 ( " .btn " ), // button
box = fun2 ( " .box " ), // box
text = fun2 ( " .text " ), // text
BG =fun2 ( " .bg " ), // Background
In Flag = to false ; // verification fails
// mouse down
// Event event to a state
btn.onmousedown = function (Event) {
var E = Event || the window.event;
var downX = e.clientX; // presses the X-axis point
// move
btn.onmousemove = function (Event) {
var Movex =event.clientX - downX; // moved a distance - from the press
// a moving range
IF (Movex > 0 ) {
the this .style.left = Movex + ' PX ' ;
bg.style.width = Movex + ' PX ' ;
// verification succeeds
IF (Movex > = (box.offsetWidth - the this .offsetWidth)) {
In Flag = to true ; // 'authentication success'
text.innerHTML = ' authentication success ' ;
text.style.color = ' #fff ' ;
btn.onmousemove = null ; // clear the event
btn.onmousedown = null ; // Clear event
}
}
};
};
// release
btn.onmouseup = function () {
btn.onmousemove = null ; // clear the event
// determination conditions
IF (In Flag) return ;
the this .style.left = 0 ;
bg.style.width = 0 ;
}
}
</ Script >
</ body >
</ HTML >
Renderings:
