滑动验证码

2022-09-01 20:00:24 阅读：197 来源： 互联网

标签：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;
}

前端引用：

  <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,滑动
来源： https://www.cnblogs.com/daboluo/p/16647670.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

滑动验证码