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="stylesheet">
<link href="<%=basePath%>/res/css/font-awesome.min93e3.css?v=4.4.0"
rel="stylesheet"> <link href="<%=basePath%>/res/css/animate.min.css" rel="stylesheet">
<link href="<%=basePath%>/res/css/style.min862f.css?v=4.1.0"
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#"><small>忘记密码了？</small></a> | <a
href="<%=basePath%>/register">注册一个新账号</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
滑动验证 先放效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 原生JS实现滑动验证功能
一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...
- What？废柴， 模拟登陆，代码控制滑动验证真的很难吗？Are you kidding？？？
1.简介 在前边的python接口自动化的时候,我们由于博客园的登录机制的改变,没有用博客园的登录测试接口.那么博客园现在变成了滑动验证登录,而且现在绝大多数的登录都变成这种滑动验证和验证码的登录验证 ...
- DRF 中使用 级验科技滑动验证
接口的login 登录 使用 Django 中的 auth 认证 因为之前合并了 django 的 用户表 创建的 用户 密码 会在内部进行加密 不知道加密方式所以要使用 authenticate 来 ...
- luffy之多条件登录与极验滑动验证码
多条件登录 JWT扩展的登录视图,在收到用户名与密码时,也是调用Django的认证系统中提供的authenticate()来检查用户名与密码是否正确. 我们可以通过修改Django认证系统的认证后端( ...
- day 88 Vue学习之八geetest滑动验证
本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...
- day 86 Vue学习之八geetest滑动验证
Vue学习之八geetest滑动验证 本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...
- 滑动验证的设计与实现J2EE
滑动验证的设计与实现J2EE 注:本博文为博主原创,转载请注明出处. 项目源码地址:https://github.com/zhangxy1035/Verify 本篇博文的主要目录如下: 一.项目简介二 ...
- Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一 . vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/ ...
随机推荐
- Java 8的新特性—终极版
作者:杜琪[译] 原文链接:http://www.jianshu.com/p/5b800057f2d8 1. 简介 毫无疑问,Java 8是Java自Java 5(发布于2004年)之后的最重要的版本 ...
- Hibernate持久化对象的三种状态深入理解
关于OID hibernate缓存是一个map,他会根据OID作为缓存对象的key,我们的映射文件中<id>标签指定的属性值会作为OID 持久化对象的三种状态 为了方便理解,Hiberna ...
- MVC-1(javabean+jsp+servlet+jdbc)
这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...
- A workaround to change shared memory size for Docker containers in AWS ECS
Issue Because of not supporting to specify the following docker run parameter, containers in ECS can ...
- hotspot虚拟机的调试
3这篇文章,怎么说呢.是踩了很多坑得出来了,也是在自己快要崩溃的时候得出来了的. 连续踩了差不多10来个小时的坑,还好是出来了. 这篇文章是调试虚拟机的,其实网上也能找到一些文章,但是每个人的环境不一 ...
- C/C++中如何接收return返回来的数组元素
我们知道return语句作为被调用函数的结束,返回给调用者函数值.一般来说,是返回一个函数值,像一个int, double,char等类型的数据,当然也可以是他们的指针.但是当我们遇到要返回很多数怎么 ...
- dnsmasq服务的安装与配置
在ubuntu16.04上安装dnsmasq服务,在本地做泛域名解析 安装 $ apt-get install dnsmasq -y $ /etc/init.d/dnsmasq start 配置 Dn ...
- Mysql--数据的操作
1.插入数据 1.1 插入完整数据记录 语法1: 例子: 语法2: 例子: 1.2 插入数据记录一部分 语法: 例子: 1.3 插入多条数据记录 1.插入多条完整的数据 语法: 例子: 插入多条部 ...
- JavaScript：彻底理解同步、异步和事件循环(Event Loop)
一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他 ...
- IntelliJ IDEA（三） ：常用快捷键
说IDEA对新手来说难,可能其中一个原因就是快捷键组合多而且复杂但是它也很全,基本所有功能都可以通过快捷键来完成,可以这么说,如果你掌握了所有IDEA的快捷键使用,那么你完全可以丢掉鼠标,而且不影响开 ...