滑动验证码

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