首页 > 其他分享 >滑动验证码

滑动验证码

时间:2022-09-01 20:00:46浏览次数:47  
标签:box style code endX 验证码 boxEven progress 滑动

hdyz.css

<style>
.code-box{
	padding: 0 10px;
    width: 220px;
    height: 40px;
    color: #fff;
    text-shadow: 1px 1px 1px black;
    background: rgba(0, 0, 0, 0.16);
    border: 1px;
    border-radius: 5px;
	outline: none;
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
	border-color:black;
}
.code-box{
	position: relative;
}
.code-box p,
.code-box span{
	display:block;
	position: absolute;
	left: 0;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
}
.code-box span{
	width: 40px;
	background-color:#fff;
	font-family: "瀹嬩綋";
	font-size: 16px;
	cursor: pointer;
}
.code-box p{
	width: 0;
	background-color: #FFFF99;
	overflow: hidden;
	text-indent: -20px;
	transition: background 1s ease-in;
}
.code-box .code-input{
	display: none;
}
</style>

  hdyz.js

//获取元素距离页面边缘的距离
function getOffset(box,direction){
    
    var setDirection =  (direction == 'top') ? 'offsetTop' : 'offsetLeft' ;
    
    var offset =  box[setDirection];
    
    var parentBox = box.offsetParent;
    while(parentBox){
        
        offset+=parentBox[setDirection];
        parentBox = parentBox.offsetParent;
    }
    parentBox = null;
    
    return parseInt(offset);
}

function moveCode(code){

    var fn = {codeVluae : code};

    var box = document.querySelector("#code-box"),
            progress = box.querySelector("p"),
            codeInput = box.querySelector('.code-input'),
            evenBox = box.querySelector("span");

    //默认事件
    var boxEven = ['mousedown','mousemove','mouseup'];
    //改变手机端与pc事件类型
    if(typeof document.ontouchstart == 'object'){

        boxEven = ['touchstart','touchmove','touchend'];
    }

    var goX,offsetLeft,deviation,evenWidth,endX;

    function moveFn(e){

        e.preventDefault();
        e = (boxEven['0'] == 'touchstart') ? e.touches[0] : e || window.event;
        
        
        endX = e.clientX - goX;
        endX = (endX > 0) ? (endX > evenWidth) ? evenWidth : endX : 0;
    
        if(endX > evenWidth * 0.7){
            
            progress.innerText = '松开验证';
            progress.style.backgroundColor = "#66CC66";
        }else{
            
            progress.innerText = '';
            progress.style.backgroundColor = "#FFFF99";
        }

        progress.style.width = endX+deviation+'px';
        evenBox.style.left = endX+'px';
    }

    function removeFn() {

        document.removeEventListener(boxEven['2'],removeFn,false);
        document.removeEventListener(boxEven['1'],moveFn,false);

        if(endX > evenWidth * 0.7){
            
            progress.innerText = '验证成功';
            progress.style.width = evenWidth+deviation+'px';
            evenBox.style.left = evenWidth+'px'
            
            codeInput.value = fn.codeVluae;
            evenBox.onmousedown = null;
        }else{

            progress.style.width = '0px';
            evenBox.style.left = '0px';
        }
    }

    evenBox.addEventListener(boxEven['0'], function(e) {

        e = (boxEven['0'] == 'touchstart') ? e.touches[0] : e || window.event;

            goX = e.clientX,
                offsetLeft = getOffset(box,'left'),
                deviation = this.clientWidth,
                evenWidth = box.clientWidth - deviation,
                endX;

        document.addEventListener(boxEven['1'],moveFn,false);

        document.addEventListener(boxEven['2'],removeFn,false);
    },false);
    
    fn.setCode = function(code){

        if(code)
            fn.codeVluae = code;
    }

    fn.getCode = function(){

        return fn.codeVluae;
    }

    fn.resetCode = function(){

        evenBox.removeAttribute('style');
        progress.removeAttribute('style');
        codeInput.value = '';
    };

    return fn;
}

前端引用:

 <link href="~/Content/hdyz.css" type="text/css" rel="stylesheet" />

<script src="~/Scripts/hdyz.js"></script>

  <span class="lable">拖动验证<i style="color:red;">*</i></span>
                    <div class="code-box" id="code-box" style="float:right">
                        <input type="text" name="num" class="code-input" id="num" />
                        <p></p>
                        <span>>>></span>
                    </div>

 

 

 

 

<script type="text/javascript">
     window.addEventListener('load', function () {
        var code = "@ViewBag.code",
            codeFn = new moveCode(code);
    });
</script>

后端生成验证码:用session 或存到redis中

 ViewBag.code = Session["ValidateCode"];

验证可以在前端js中 和后端逻辑

自行处理。

标签:box,style,code,endX,验证码,boxEven,progress,滑动
From: https://www.cnblogs.com/daboluo/p/16647670.html

相关文章

  • 一、验证码验证-10
    1、解决验证码思路(1)内部网站,可以设置万能的验证码(2)让开发去掉验证码(3)识别验证码:定位图片坐标保存图片解析图片(图片解析软件)直接读取保存后的文档。2、本机安装pi......
  • APISpace 验证码短信API
    APISpacef的验证码短信API支持三大运营商,虚拟运营商短信发送,电信级运维保障,独享专用通道,3秒可达,99.99%到达率,支持大容量高并发。三网合一:联手三大运营商,三网短信通道落......
  • Appium - 模拟手机滑动操控的操作
    在模拟“滑动操控”的时候,使用的方法就是swipe(),该方法的参数说明如下:start_x:起始横坐标start_y:起始纵坐标end_x:结束时横坐标end_y:结束时纵坐标duration:滑动持续......
  • redis+java简单6位数验证码验证
    实现思路定义一个方法实现随机二维码publicstaticStringgetCode(){//发送六位数验证码Randomrandom=newRandom();Stringcode="......
  • jmeter使用base64验证码登录
    依赖环境/工具:java环境、jmeter、python3、pycharm(ide工具)此次主要操作步骤:使用jmeter工具把验证码base64加密信息保存至本地。编写python脚本(包含:解码bse64验证码......
  • Vue + Elementui 实现登录页 手机验证码、倒计时等功能
    Vue+Elementui实现登录页手机验证码、倒计时等功能点击打开视频讲解更加详细<template><divid="app"><divclass="left">用代码改变世界</div><el-fo......
  • 滑动加载
    html<divclass="message-box"data-spy="scroll"data-target="#navbar-example"data-offset="0"ref="messageList"></div> jsmounted(){//缓存指针......
  • APICloud AVM 封装验证码输入框组件
    AVM(Application-View-Model)前端组件化开发模式基于标准WebComponents组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完全兼容WebCom......
  • 5行Python实现验证码识别,太稳了!
    在很久之前,分享过一次Python代码实现验证码识别的办法。当时采用的是pillow+pytesseract,优点是免费,较为易用。但其识别精度一般,若想要更高要求的验证码识别,初学者就只能去......
  • 小程序scroll-view滑动进度条
     效果图如下:    代码如下:Page({data:{left:0.5//初始化滑块位置},//金刚区滑动事件scroll(event){letscrollLeft=e......