首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js登录滑动验证的实现(不滑动无法登陆)

Posted in Javascript onJanuary 03, 2018

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">
 <div class="middle-box text-center loginscreen animated fadeInDown">
 <div>
  <h3 style="margin-top: 100px;">欢迎登录</h3>
  <form class="m-t" role="form" action="<%=basePath%>/login"
  method="POST" onsubmit="return login();">
  <div class="form-group">
   <input name="username" id="username" type="text"
   class="form-control" placeholder="用户名" required="">
  </div>
  <div class="form-group">
   <input type="password" name="password" id="password"
   class="form-control" placeholder="密码" required="">
  </div>
  
  <div class="wrap" style="margin: 10px auto 10px">
   <div id="slider">
   <div class="drag_bg"></div>
   <div class="drag_text" onselectstart="return false;"
    unselectable="on">拖动滑块验证</div>
   <div class="handler handler_bg"></div>
   </div>
  </div>
  <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>
 </div>
 </div>
 <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() {
 $('#username').val();
 });
 function login() {
 if($(".drag_bg").width()<260){
  return false;
 }
 var password = $('#password').val();
 password = $.md5(password);
 console.log(password);
 $('#password').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.$('#' + this.id);
  this.handler = dog.$('.handler');
  this.bg = dog.$('.drag_bg');
  },
  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('unselect');
   startX = e.clientX - handler.offsetLeft;
   console.log('startX: ' + startX + ' px');
   dog.on(doc, 'mousemove', drag.move);
   dog.on(doc, 'mouseup', 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('lastX: ' + lastX + ' px');
   if (lastX >= max) {
    handler.classList.add('handler_ok_bg');
    that.slider.classList.add('slide_ok');
    dog.off(handler, 'mousedown', drag.down);
    drag.up();
   }
   that.bg.style.width = lastX + 'px';
   handler.style.left = lastX + 'px';
   },
   up : function(e) {
   var e = e || window.event;
   that.slider.classList.remove('unselect');
   if (lastX < width) {
    that.bg.classList.add('ani');
    handler.classList.add('ani');
    that.bg.style.width = 0;
    handler.style.left = 0;
    setTimeout(function() {
    that.bg.classList.remove('ani');
    handler.classList.remove('ani');
    }, 300);
   }
   dog.off(doc, 'mousemove', drag.move);
   dog.off(doc, 'mouseup', drag.up);
   }
  };
  dog.on(handler, 'mousedown', drag.down);
  }
 };
 window.S = window.Slider = Slider;
 })(window, document);
 var defaults = {
 id : 'slider'
 };
 new S(defaults);
</script>
</html>

以上这篇js登录滑动验证的实现(不滑动无法登陆)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

js登录滑动验证的实现(不滑动无法登陆)

- Author -

谁将新樽辞旧月，今月曾经照古人

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
js DOM模型操作
Dec 28 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
Three.js学习之几何形状
Aug 01 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
《javascript设计模式》学习笔记三：Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
利用node.js开发cli的完整步骤
Dec 29 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
Node使用Sequlize连接Mysql报错：Access denied for user ‘xxx’@‘localhost’
Jan 03 #Javascript
angularjs实现分页和搜索功能
Jan 03 #Javascript
vue引入ueditor及node后台配置详解
Jan 03 #Javascript
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
寄语(276) 倡议书(159) 建议书(203) 评语(336) 感谢信(72) 决心书(42) 保证书(97) 责任书(145) 活动总结(790) 请假条(31)
You might like
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP模板解析类实例
2015/07/09 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
MSN消息提示类
2006/09/05 Javascript
基于jquery的表格排序
2010/09/11 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
keras打印loss对权重的导数方式
2020/06/10 Python
《九色鹿》教学反思
2014/02/27 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
先进个人材料怎么写
2014/12/30 职场文书
兴趣班停课通知
2015/04/24 职场文书
团日活动总结格式
2015/05/11 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL