cari

Rumah >hujung hadapan web >tutorial js >在js中如何实现登录需要滑动验证

在js中如何实现登录需要滑动验证

亚连
亚连asal
2018-06-13 17:58:542408semak imbas

下面我就为大家分享一篇js登录滑动验证的实现(不滑动无法登陆)，具有很好的参考价值，希望对大家有所帮助。

js的判断这里是根据滑块的位置进行判断，应该是用一个flag判断

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
 String basePath = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录</title>
<link href="<%=basePath%>/res/css/bootstrap.min14ed.css?v=3.3.6" rel="external nofollow" 
 rel="stylesheet">
<link href="<%=basePath%>/res/css/font-awesome.min93e3.css?v=4.4.0" rel="external nofollow" 
 rel="stylesheet">
<link href="<%=basePath%>/res/css/animate.min.css" rel="external nofollow" rel="stylesheet">
<link href="<%=basePath%>/res/css/style.min862f.css?v=4.1.0" rel="external nofollow" 
 rel="stylesheet">
<!--[if lt IE 9]>
 <meta http-equiv="refresh" content="0;ie.html" />
 <![endif]-->
<script>
 if (window.top !== window.self) {
 window.top.location = window.location;
 }
</script>
<style>
* {
 margin: 0;
 padding: 0;
}
body {
 font: 12px/1.125 Microsoft YaHei;
 background: #fff;
}
ul, li {
 list-style: none;
}
a {
 text-decoration: none;
}
.ani {
 transition: all .3s;
}
.wrap {
 width: 300px;
 height:;
 text-align: center;
 margin: 150px auto;
}
.inner {
 padding: 15px;
}
.clearfix {
 overflow: hidden;
 _zoom: 1;
}
.none {
 display: none;
}
#slider {
 position: relative;
 background-color: #e8e8e8;
 width: 300px;
 height: 34px;
 line-height: 34px;
 text-align: center;
}
#slider .handler {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 40px;
 height: 32px;
 border: 1px solid #ccc;
 cursor: move;
}
.handler_bg {
 background: #fff
 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==")
 no-repeat center;
}
.handler_ok_bg {
 background: #fff
 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==")
 no-repeat center;
}
#slider .drag_bg {
 background-color: #7ac23c;
 height: 34px;
 width: 0px;
}
#slider .drag_text {
 position: absolute;
 top: 0px;
 width: 300px;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
}
.unselect {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
.slide_ok {
 color: #fff;
}
</style>
</head>
<style>
.btn-primary {
 background-color: #0000FF;
}
.btn-primary:hover {
 background-color: #0000FF;
}
.btn-primary {
 background-color: #0000FF;
 border-color: #0000FF;
}
</style>
<body class="gray-bg">
 <p class="middle-box text-center loginscreen animated fadeInDown">
 <p>
  <h3 style="margin-top: 100px;">欢迎登录</h3>
  <form class="m-t" role="form" action="<%=basePath%>/login"
  method="POST" onsubmit="return login();">
  <p class="form-group">
   <input name="username" id="username" type="text"
   class="form-control" placeholder="用户名" required="">
  </p>
  <p class="form-group">
   <input type="password" name="password" id="password"
   class="form-control" placeholder="密码" required="">
  </p>
  
  <p class="wrap" style="margin: 10px auto 10px">
   <p id="slider">
   <p class="drag_bg"></p>
   <p class="drag_text" onselectstart="return false;"
    unselectable="on">拖动滑块验证</p>
   <p class="handler handler_bg"></p>
   </p>
  </p>
  <input type="hidden" name="${_csrf.parameterName}"
   value="${_csrf.token}">
  <button type="submit" style="background-color: #0000FF;" class="btn btn-primary block full-width m-b">登
   录</button>
  <%
   if (request.getParameter("error") != null) {
  %>
  <span id="" style="color: red;">账号或者密码错误！</span>
  <%
   }
  %>
  <%
   if (request.getParameter("logout") != null) {
  %>
  <span>已经安全退出！</span>
  <%
   }
  %>
  <p class="text-muted text-center">
   <a href="login.html#" rel="external nofollow" ><small>忘记密码了？</small></a> | <a
   href="<%=basePath%>/register" rel="external nofollow" >注册一个新账号</a>
  </p>
  </form>
 </p>
 </p>
 <script src="<%=basePath%>/res/js/jquery.min.js?v=2.1.4"></script>
 <script src="<%=basePath%>/res/js/bootstrap.min.js?v=3.3.6"></script>
</body>
<script type="text/javascript"
 src="<%=basePath%>/res/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/res/js/jquery.md5.js"></script>
<script type="text/javascript">
 $(function() {
 $(&#39;#username&#39;).val();
 });
 function login() {
 if($(".drag_bg").width()<260){
  return false;
 }
 var password = $(&#39;#password&#39;).val();
 password = $.md5(password);
 console.log(password);
 $(&#39;#password&#39;).val(password);
 return true;
 }
</script>
<script>
 (function(window, document, undefined) {
 var dog = {//声明一个命名空间，或者称为对象
  $ : function(id) {
  return document.querySelector(id);
  },
  on : function(el, type, handler) {
  el.addEventListener(type, handler, false);
  },
  off : function(el, type, handler) {
  el.removeEventListener(type, handler, false);
  }
 };
 //封装一个滑块类
 function Slider() {
  var args = arguments[0];
  for ( var i in args) {
  this[i] = args[i]; //一种快捷的初始化配置
  }
  //直接进行函数初始化，表示生成实例对象就会执行初始化
  this.init();
}
Slider.prototype = {
  constructor : Slider,
  init : function() {
  this.getDom();
  this.dragBar(this.handler);
  },
  getDom : function() {
  this.slider = dog.$(&#39;#&#39; + this.id);
  this.handler = dog.$(&#39;.handler&#39;);
  this.bg = dog.$(&#39;.drag_bg&#39;);
  },
  dragBar : function(handler) {
  var that = this, startX = 0, lastX = 0, doc = document, width = this.slider.offsetWidth, max = width
   - handler.offsetWidth, drag = {
   down : function(e) {
   var e = e || window.event;
   that.slider.classList.add(&#39;unselect&#39;);
   startX = e.clientX - handler.offsetLeft;
   console.log(&#39;startX: &#39; + startX + &#39; px&#39;);
   dog.on(doc, &#39;mousemove&#39;, drag.move);
   dog.on(doc, &#39;mouseup&#39;, drag.up);
   return false;
   },
   move : function(e) {
   var e = e || window.event;
   lastX = e.clientX - startX;
   lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max，巧妙写法
   console.log(&#39;lastX: &#39; + lastX + &#39; px&#39;);
   if (lastX >= max) {
    handler.classList.add(&#39;handler_ok_bg&#39;);
    that.slider.classList.add(&#39;slide_ok&#39;);
    dog.off(handler, &#39;mousedown&#39;, drag.down);
    drag.up();
   }
   that.bg.style.width = lastX + &#39;px&#39;;
   handler.style.left = lastX + &#39;px&#39;;
   },
   up : function(e) {
   var e = e || window.event;
   that.slider.classList.remove(&#39;unselect&#39;);
   if (lastX < width) {
    that.bg.classList.add(&#39;ani&#39;);
    handler.classList.add(&#39;ani&#39;);
    that.bg.style.width = 0;
    handler.style.left = 0;
    setTimeout(function() {
    that.bg.classList.remove(&#39;ani&#39;);
    handler.classList.remove(&#39;ani&#39;);
    }, 300);
   }
   dog.off(doc, &#39;mousemove&#39;, drag.move);
   dog.off(doc, &#39;mouseup&#39;, drag.up);
   }
  };
  dog.on(handler, &#39;mousedown&#39;, drag.down);
  }
 };
 window.S = window.Slider = Slider;
 })(window, document);
 var defaults = {
 id : &#39;slider&#39;
 };
 new S(defaults);
</script>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Vue中设置背景图片

使用vue + less如何实现简单换肤功能

使用angular、react和vue如何实现相同的面试题组件

利用jQuery实现滚动到底部时自动加载

在Angular2.0中如何实现modal对话框

Atas ialah kandungan terperinci 在js中如何实现登录需要滑动验证. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery less angular JS
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在js中如何实现判断文件类型大小Artikel seterusnya：在Angular中如何实现下拉框模糊查询功能

Artikel berkaitan

Lihat lagi