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/ ...

随机推荐

Tomcat多域名访问
对于域名解析相信很多小伙伴都了解过,就是我们在万网购买一个域名,比如hpugs.com,然后呢?我们希望域名与我们的服务器绑定,然后通过域名直接访问我们的项目,这就是本篇要和大家一起探讨的问题.下面开 ...
通过hadoop + hive搭建离线式的分析系统之快速搭建一览
最近有个需求,需要整合所有店铺的数据做一个离线式分析系统,曾经都是按照店铺分库分表来给各自商家通过highchart多维度展示自家的店铺经营数据,我们知道这是一个以店铺为维度的切分数据,非常适合目前 ...
vagrant扩容
参考: https://gist.github.com/christopher-hopper/9755310 https://www.madcoder.cn/vagrant-box-resize.ht ...
eclipse自定义代码模板
eclipse自定义代码模板 Eclipse 提供了非常多的代码模板,我们可以通过 Windows->Preferences->Java->Editor->Templates ...
Failed to load the JNI shared lib...
启动eclipse报错:Failed to load the JNI shared lib... 解决办法如下:保证JDK与eclipse相匹配在同一台计算机中,如果JDK是32位的,那么eclip ...
Android OpenGL ES 开发（三）: OpenGL ES 定义形状
在上篇文章,我们能够配置好基本的Android OpenGL 使用的环境.但是如果我们不了解OpenGL ES如何定义图像的一些基本知识就使用OpenGL ES进行绘图还是有点棘手的.所以能够在Ope ...
CCF-201512-3-画图
问题描述试题编号: 201512-3 试题名称: 画图时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述用 ASCII 字符来画图是一件有趣的事情,并形成了一门被称为 ASC ...
saltstack_grains
1. [root@kylin1 grains]# cd /srv/salt/_grains/ [root@kylin1 _grains]# ls cpu.py [root@kylin1 _grains ...
VMware12提示已将该虚拟机配置为使用 64 位客户机操作系统。但是，无法执行 64 位操作。
VMware12提示已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态解决办法: 下载LeoM ...
linux用户、组、权限问题
用户.组.权限一.权限:r, w, x1.文件权限: r:可读,可以使用类似cat等命令查看文件内容: w:可写,可以编辑或删除此文件: x: 可执行,eXacutabl ...

js登录滑动验证，不滑动无法登陆

js登录滑动验证，不滑动无法登陆的更多相关文章

随机推荐

热门专题