<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<title>移动端滑块验证</title>
</head>
<style>
form{
width: 100%;
height: 300px;
margin: 0 auto;
margin-top: 50px;
display: flex;
flex-direction: column;
}
input{
width:calc(100% - 80px);
height: 40px;
margin: 0 40px;
margin-top: 30px;
}
.stage{
position:relative;
height:34px;
width: 100%;
margin-top: 30px;
}
.slider{
position:absolute;
height:34px;
box-shadow:0 0 3px #999;
background-color:#ddd;
left:40px;
right:40px;
}
.label {
background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: slidetounlock 3s infinite;
-webkit-text-size-adjust: none;
line-height: 34px;
height: 34px;
text-align: center;
font-size: 14px;
width: 100%;
color: #aaa;
}
@keyframes slidetounlock
{
0% {background-position:-200px 0;}
100% {background-position:200px 0;}
}
@-webkit-keyframes slidetounlock
{
0% {background-position:-200px 0;}
100% {background-position:200px 0;}
}
.button{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 34px;
background-color: #fff;
transition: left 0s;
-webkit-transition: left 0s;
}
.button-on{
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 34px;
background-color: #fff;
transition: left 1s;
-webkit-transition: left .5s;
}
.track{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: width 0s;
-webkit-transition: width 0s;
}
.track-on{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
overflow: hidden;
transition: width 1s;
-webkit-transition: width .5s;
}
.icon {
width: 32px;
height: 32px;
position: relative;
top:1px;
left:8px;
font-family: sans-serif;
}
.icon:before{
content:'>>';
color:#ccc;
line-height:32px;
}
.spinner {
width: 32px;
height: 32px;
background: url('../images/ok.png') no-repeat;
position: relative;
top:1px;
left:4px;
display: none;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.bg-green {
line-height: 34px;
height: 34px;
text-align: center;
font-size: 14px;
background-color: #78c430;
color: #fff;
}
.sub{
width: calc(100% - 80px);
margin-left: 40px;
margin-top: 30px;
height: 45px;
background:#78c430;
color: #fff;
outline: none;
border: none;
font-size: 16px;
}
</style>
<body>
<form action="">
<input type="text" placeholder="请输入账号">
<input id="ddd" type="text" placeholder="请输入密码">
<div class="stage">
<div class="slider" id="slider">
<div class="label">向右滑动验证</div>
<div class="track" id="track">
<div class="bg-green" id="bg-green"></div>
</div>
<div class="button" id="btn">
<div class="icon" id="icon"></div>
<div class="spinner" id="spinner"></div>
</div>
</div>
</div>
<button id="sub" class="sub">提交</button>
</form>
<!-- <script src="js/slider.js"></script> -->
<script>
var oBtn = document.getElementById('btn');
var oW,oLeft;
var oSlider=document.getElementById('slider');
var oTrack=document.getElementById('track');
var oIcon=document.getElementById('icon');
var oSpinner=document.getElementById('spinner');
var bgGreen=document.getElementById('bg-green');
var flag=1;
oBtn.addEventListener('touchstart',function(e){
if(flag==1){
// console.log(e);
console.log(oBtn.offsetLeft)
var touches = e.touches[0];
oW = touches.clientX - oBtn.offsetLeft;
oBtn.className="button";
oTrack.className="track";
}
},false);
oBtn.addEventListener("touchmove", function(e) {
if(flag==1){
var touches = e.touches[0];
// console.log(touches)
oLeft = touches.clientX - oW;
if(oLeft < 0) {
oLeft = 0;
}else if(oLeft > document.documentElement.clientWidth - oBtn.offsetWidth-80) {
oLeft = (document.documentElement.clientWidth - oBtn.offsetWidth-80);
}
oBtn.style.left = oLeft + "px";
oTrack.style.width=oLeft+ 'px';
}
},false);
oBtn.addEventListener("touchend",function() {
if(oLeft>=(oSlider.clientWidth-oBtn.clientWidth)){
oBtn.style.left = (document.documentElement.clientWidth - oBtn.offsetWidth-30);
oTrack.style.width= (document.documentElement.clientWidth - oBtn.offsetWidth-30);
oIcon.style.display='none';
oSpinner.style.display='block';
bgGreen.innerHTML='验证成功'
flag=0;
}else{
oBtn.style.left = 0;
oTrack.style.width= 0;
}
oBtn.className="button-on";
oTrack.className="track-on";
},false);
//点击提交时判断是否验证成功
var sub = document.getElementById('sub');
var bgGreen = document.getElementById('bg-green');
sub.οnclick=function(){
// console.log(1)
// console.log(bgGreen.innerHTML)
if(bgGreen.innerHTML == '验证成功'){
return true
}else{
alert('请拖动滑块验证')
return false
}
}
</script>
</body>
</html>
