简单的滑动验证码JS插件图片验证码

小鱼儿 2023-02-13 14:47 1阅读 0赞

### 简单的滑动验证码JS插件 图片验证码 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="RedJu.css">
    	<script type="text/javascript" src="RedJu.js"></script>
    </head>
    <body>
    	<div id="slideVerify">
    		<div class="image">
            	<div class="chip2"></div>
            	<div class="chip"></div>
        	</div>
    		<div class="drag">
            	<div class="bg"></div>
            	<div class="text" onselectstart="return false;">请拖动滑块解锁</div>
            	<div class="btn">>></div>
        	</div>
    	</div>
    	<script type="text/javascript"> var slideVerify = new SlideVerify("img/",9); </script>
    </body>
    </html>

//;分号开头，用于防止代码压缩合并时与其它代码混在一起造成语法错误
    //而事实证明，uglify压缩工具会将无意义的前置分号去掉，我只是习惯了这么写
    
    //(function(){})();立即执行函数，闭包，避免污染全局变量
    //通常一个插件只暴露一个变量给全局供其它程序调用
    //还有其它写法，运算符+函数体+括号
    //例：!function(){}(); +function(){}(); -function(){}();
    // void function(){}(); 等等只要能对函数返回值进行运算的符号都可以
    ;(function(global) { 
    
        //开启严格模式，规范代码，提高浏览器运行效率
        //"use strict";
    
        //定义一个类，通常首字母大写
        var SlideVerify = function(path,num) { 
    
            var slideVerify = document.getElementById('slideVerify'),
                chip = slideVerify.getElementsByClassName('chip')[0],//图片小块
                chip2 = slideVerify.getElementsByClassName('chip2')[0],
                box = slideVerify.getElementsByClassName('drag')[0],
                bg = slideVerify.getElementsByClassName('bg')[0],
                text = slideVerify.getElementsByClassName('text')[0],
                btn = slideVerify.getElementsByClassName('btn')[0],
                image = slideVerify.getElementsByClassName('image')[0],
                offsetX,//鼠标滑动距离
                distance,// = //滑动成功的宽度（距离）
                sildeWidth = box.offsetWidth - btn.offsetWidth,
                status =false,
                imgAt = Math.floor(Math.random()*num);
            //var img = document.createElement('img');
            //image.appendChild(img);
    
            image.style.background = 'url('+path+imgAt+'.jpg)';
            var getStatus = function(){ 
                return status;
            }
            //二、给滑块注册鼠标按下事件
            btn.onmousedown = function(e){ 
    
                //1.鼠标按下之前必须清除掉后面设置的过渡属性
                btn.style.transition = "";
                bg.style.transition ="";
    
                //说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。
    
                //2.当滑块位于初始位置时，得到鼠标按下时的水平位置
                var e = e || window.event;
                var downX = e.clientX;
    
                //加载图片小块
                ry = Math.floor(Math.random()*80)+20;
                rx = Math.floor(Math.random()*150)+110;
                chip.style.background = 'url('+path+imgAt+'.jpg)';
                chip.style.top = ry+'px';
                chip.style.backgroundPositionX = -rx+ 'px';
                chip.style.backgroundPositionY = -ry+ 'px';
                chip2.style.background = 'url('+path+imgAt+'.jpg)';
                chip2.style.top = ry+'px';
                chip2.style.left = rx+'px';
                chip2.style.backgroundPositionX = -rx+ 'px';
                chip2.style.backgroundPositionY = -ry+ 'px';
                chip2.style['box-shadow'] = '5px 5px 10px black';
                distance = rx;
                //三、给文档注册鼠标移动事件
                document.onmousemove = function(e){ 
    
                    var e = e || window.event;
                    //1.获取鼠标移动后的水平位置
                    var moveX = e.clientX;
    
                    //2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
                    offsetX = moveX - downX;
    
                    //3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
                    if( offsetX > sildeWidth){ 
                        offsetX = sildeWidth;//如果滑过了终点，就将它停留在终点位置
                    }else if( offsetX < 0){ 
                        offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
                    }
    
                    //4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
                    btn.style.left = offsetX + "px";
                    bg.style.width = offsetX + "px";
                    chip.style.left = offsetX + "px";
    
                    
                }
    
                //四、给文档注册鼠标松开事件
                document.onmouseup = function(e){ 
    
                    //如果鼠标的水平移动距离 = 滑动成功的宽度
                    if( offsetX - distance<8 && offsetX - distance>-8){ 
    
                        //1.设置滑动成功后的样式
                        text.innerHTML = "验证通过";
                        text.style.color = "#fff";
                        btn.innerHTML = "√";
                        btn.style.color = "green";
                        bg.style.backgroundColor = "lightgreen";
                        
                        bg.style.width = sildeWidth + "px";
                        btn.style.left = sildeWidth + "px";
                        status = true;
    
                        //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
                        btn.onmousedown = null;
                        document.onmousemove = null;
                        image.onmousedown = null;
                        //3.成功解锁后的回调函数
                        // setTimeout(function(){ 
                        // alert('解锁成功！');
                        // },100);
                    }else{ 
                        //反之，则将滑块复位（设置了1s的属性过渡效果）
                        
                        btn.style.left = 0;
                        bg.style.width = 0;
                        // btn.style.transition = "left 1s ease";
                        // bg.style.transition = "width 1s ease";
                        imgAt = Math.floor(Math.random()*num);
                        image.style.background = 'url('+path+imgAt+'.jpg)';
                        chip.style.background = null;
                        chip2.style.background = null;
                        chip2.style['box-shadow'] = null;
                    }
                    //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
    
    
            }
            return { getStatus};
        };
    
        //覆写原型链，给继承者提供方法
        SlideVerify.prototype = { 
            init: function() { 
    
            }
        };
    
        //兼容CommonJs规范
        if (typeof module !== 'undefined' && module.exports) module.exports = SlideVerify;
    
        //兼容AMD/CMD规范
        if (typeof define === 'function') define(function() {  return SlideVerify; });
    
        //注册全局变量，兼容直接使用script标签引入该插件
        global.SlideVerify = SlideVerify;
    
    //this，在浏览器环境指window，在nodejs环境指global
    //使用this而不直接用window/global是为了兼容浏览器端和服务端
    //将this传进函数体，使全局变量变为局部变量，可缩短函数访问全局变量的时间
    })(this);

#slideVerify .drag{ 
        width: 300px;
        height: 40px;
        line-height: 40px;
        background-color: #e8e8e8;
        position: relative;
        margin:0 auto;
    }
    #slideVerify .bg{ 
        width:40px;
        height: 100%;
        position: absolute;
        background-color: #75CDF9;
    }
    #slideVerify .text{ 
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        user-select: none;
    }
    #slideVerify .btn{ 
        width:40px;
        height: 38px;
        position: absolute;
        border:1px solid #ccc;
        cursor: pointer;
        font-family: "宋体";
        text-align: center;
        background-color: #fff;
        user-select: none;
        color:#666;
    }
    #slideVerify .chip{ 
        width: 40px;
        height: 40px;
        position: absolute;
    }
    #slideVerify .chip2{ 
        width: 40px;
        height: 40px;
        position: absolute;
        -webkit-filter: brightness(0.5) opacity(0.5);
    }
    #slideVerify .image{ 
        width: 300px; 
        height: 200px; 
        position:relative;
        margin: 0 auto
    }

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmdmZW5nZmVuZw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmdmZW5nZmVuZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529172103893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmdmZW5nZmVuZw==,size_16,color_FFFFFF,t_70