滑动验证码

hdyz.css

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<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中 和后端逻辑

自行处理。