验证码 - 双小
验证码
最近在做一个技术调研及实践吧，参考无感验证码技术，集合滑动验证码、点选验证码、数字运算验证码、图片验证码等为一体，根据后台返回的一些信息来决定给用户显示哪种验证码。
1. 数字验证码
<!--数字运算验证码--> <div id="numCode"> <div class="algorSty"> <div style="text-align: center;margin-top: 20px;"> <input id="number" type="text" disabled="true" class="inSty"> <input type="text" id="numResult" class="inSty"> </div> <div style="text-align: center;"> <button class="btnSty" style="width: 175px; background-color: red;">换一张</button> <button id="numSubmit" class="btnSty" style="width: 175px;">确认</button> </div> </div> </div>
1 // 数字运算验证码 2 var code = 9999; 3 var ranColor = \'#\' + (\'00000\' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); 4 var ranColor2 = \'#\' + (\'00000\' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6); 5 var num1 = Math.floor(Math.random() * 100); 6 var num2 = Math.floor(Math.random() * 100); 7 var tmparith = Math.floor(Math.random() * 3); 8 var htm = \'\'; 9 switch (tmparith) { 10 case 1: 11 code = num1 + num2; 12 htm = num1 + \' + \' + num2 + \' = ?\' ; 13 break; 14 case 2: 15 if (parseInt(num1) < parseInt(num2)) { 16 var tmpnum = num1; 17 num1 = num2; 18 num2 = tmpnum; 19 } 20 code = num1 - num2; 21 htm = num1 + " - " + num2 + \' = ?\'; 22 break; 23 default: 24 code = num1 * num2; 25 htm = num1 + \' * \' + num2 + " = ?"; 26 break; 27 } 28 $(\'#number\').val(htm); 29 $(\'#number\').css(\'background\', ranColor); 30 $(\'#number\').css(\'color\', ranColor2);
2. 点选验证码
<!--点选验证码--> <div id="selectCode"> <div> <div class="codeImg" id="codeImg" @click="imgCode"> <!--<img id="testMouseImg" onclick="this.src=\'../assets/images/2.jpg?\'+ Math.random()" src="../assets/images/2.jpg"--> <!--class="imgSty" @click="imgMouse"/>--> <img id="testMouseImg" src="../assets/images/2.jpg" class="imgSty" @click="imgMouse"/> </div> <div class="codeText" id="captcha"> <span>请依次点击 <label id="forMousePos"></label> </span> </div> <div class="error" id="selectFaildiv"> <i style="color: #FF0000">校验失败</i> </div> <div class="success" id="selectSuccessdiv"> <i style="color: #3CB371">校验通过</i> </div> </div> </div>
1 // 点选验证码 2 var client = \'\'; 3 var m = 1; 4 // 获取图片层距离浏览器顶部的高度和宽度 5 var hei = $(\'#codeImg\').offset().top; 6 var left = $(\'#codeImg\').offset().left; 7 8 /* jquery 获取鼠标坐标函数 */ 9 function mousePos(e) { 10 var x, y; 11 // 实现多种浏览器兼容 12 var e = e || window.event; 13 console.log(\'Y: \' + e.offsetY + \' X: \' + e.offsetX); 14 // offsetX 表示鼠标指针位置相对于触发事件的对象的X坐标； offsetY表示鼠标指针位置相对于触发事件的对象的Y坐标 15 return { 16 x: e.offsetX, 17 y: e.offsetY 18 }; 19 }; 20 $(\'#codeImg\').on(\'click\', function (e) { 21 if (m <= 4) { 22 createPoint(mousePos(e)) 23 } 24 }); 25 var n = 0; 26 $(\'#testMouseImg\').on(\'click\', function (e) { 27 offsetX = mousePos(e).x; 28 offsetY = mousePos(e).y; 29 offsetXY = offsetX + "-" + offsetY; 30 coordinateToString(offsetXY); 31 n++; 32 $(\'#testMouseImg\').html(n); 33 console.log(n) 34 if (n === 4) { 35 client = client.substring(0, client.length - 1); 36 createPoint(mousePos(e)) 37 /* 点击四次后传回坐标 */ 38 var selParams = { 39 x: \'\', 40 y: \'\', 41 code: \'\', 42 type: 2 43 }; 44 $.post(\'/api/verification/verify\', selParams, function(data) { 45 if (data.bosy.code === 1) { 46 $(\'#selectCode\').hide(); 47 $(\'#sucMsg\').show(); 48 } else { 49 client = \'\'; 50 n = 0; 51 // 清除append上的html 52 m = 1; 53 $(\'.pointArea\').remove(); 54 //切换图片 55 56 } 57 }, \'json\'); 58 $.ajax({ 59 // url: \'\' + zzzz, 60 url: \'\', 61 type: \'get\', 62 success: function (data) { 63 if (data.status === "true") { 64 console.log(\'校验成功\'); 65 $("#captcha").val(client); 66 $("#captcha").attr("value", client); 67 $("#captcha").text(\'验证通过\'); 68 $("#captcha").css(\'display\', \'none\'); 69 $("#selectSuccessdiv").css(\'display\', \'block\'); 70 $("#selectFaildiv").css(\'display\', \'none\'); 71 } else { 72 $("#captcha").css(\'display\', \'none\'); 73 $("#selectFaildiv").css(\'display\', \'block\'); 74 $("#selectSuccessdiv").css(\'display\', \'none\'); 75 client = \'\'; 76 n = 0; 77 // 清除append上的html 78 m = 1; 79 $(\'.pointArea\').remove(); 80 // 切换图片--重新调一次获取验证码图片的方法 81 $.ajax({ 82 url: \'\', 83 type: \'get\', 84 success: function () { 85 $(\'#testMouseImg\').attr(\'src\', \'../assets/images/1.jpg\'); 86 //根据后端要求选择不同的拼接方式 87 textstr = "雨,呢,文,史" 88 subData = " “" + textstr.substr(0, 1) + "” “" + textstr.substr(2, 1) + "” “" + textstr.substr(4, 1) + "” “" + textstr.substr(6, 1) + "”"; 89 $("#forMousePos").text(subData); 90 } 91 }); 92 //设置定时器 93 setTimeout(function () { 94 selectFaild() 95 }, 1000); 96 } 97 }, 98 }); 99 console.log(client); 100 } 101 }) 102 function coordinateToString(xy) { 103 client = client + xy + "@"; 104 } 105 // 校验失败后后端传过来的字体显示（校验失败的提示消失） 106 function selectFaild() { 107 $("#captcha").css(\'display\', \'block\'); 108 $("#selectFaildiv").css(\'display\', \'none\'); 109 } 110 //创建坐标点 111 function createPoint(pos) { 112 var circleHtml = \'<div class="pointArea" \' + 113 \'style="background-color:#1abd6c;\' + 114 \'color:#fff;\' + 115 \'z-index:9999;\' + 116 \'width:30px;\' + 117 \'height:30px;\' + 118 \'text-align:center;\' + 119 \'line-height:30px;\' + 120 \'border-radius: 50%;\' + 121 \'position:absolute;\' + 122 \'top:\'+parseInt(pos.y + hei)+\'px;\' + 123 \'left:\'+parseInt(pos.x + left)+\'px;">\'+m+\'</div>\'; 124 $("#codeImg").append(circleHtml); 125 console.log(\'top: \' + parseInt(pos.y + hei) + \' left: \' + parseInt(pos.x + left)); 126 return ++m; 127 }
3. 滑动验证码
<!--滑动验证码--> <div id="sliderCode"> <div class="slide-verify"> <div class="box"></div> <div class="bar"> <span>滑动进行验证</span> <div id="mv-bar"><span id=\'mv-bar-text\'></span> <div id="block" onmousedown="down()"> <div class="move" id="img"></div> </div> </div> </div> </div> </div>
1 // 滑动验证码 2 var el = document.getElementById("block") 3 var img = document.getElementById("img") 4 var bar = document.getElementById("mv-bar") 5 var barText = document.getElementById("mv-bar-text") 6 var flag = false; 7 // 记录偏移量 8 var mvX, mvY 9 // 记录按下时原始位置 10 var downX, downY 11 // 记录元素坐标 12 var elX, elY 13 // 记录新元素坐标 14 var elNewX, elNewY 15 // 记录鼠标与元素的偏移量 16 var mvElX, mvElY 17 // 松开鼠标-- 调后台接口验证图片 18 function up() { 19 console.log(elX +\'-\' +elY); 20 console.log(elNewX + \'-\' + elNewY); 21 flag = false 22 window.removeEventListener("mouseup", up) 23 window.removeEventListener("mousemove", move) 24 // el.style.background = \'#ed4014\' 25 bar.style.background = \'#ed4014\' 26 barText.innerHTML = \'验证失败\' 27 setTimeout(function () { 28 // el.style.background = \'#cfcfcf\' 29 el.style.left = \'0px\' 30 img.style.left = \'0px\' 31 el.style.transition = \'all 0.3s\' 32 bar.style.width = \'50px\' 33 bar.style.transition = \'width 0.3s\' 34 bar.style.background = \'#3f3f3f\' 35 barText.innerHTML = \'\' 36 }, 500) 37 // 请求参数 38 var slideParams = { 39 x: elNewX, 40 y: elNewY, 41 code: \'\', 42 type: 1 43 }; 44 $.post(\'/api/verification/verify\', slideParams, function(data) { 45 if (data.body.code === 1) { 46 $(\'#sliderCode\').hide(); 47 $(\'#sucMsg\').show(); 48 } else {} 49 }, \'json\'); 50 51 } 52 // 移动鼠标 53 function move() { 54 elX = el.offsetLeft 55 elY = el.offsetTop 56 mvX = event.pageX 57 mvY = event.pageY 58 if (flag) { 59 elNewX = mvX - mvElX 60 elNewY = mvY - mvElY 61 if (elNewX > -1 && elNewX <= 350) { 62 el.style.left = elNewX + \'px\' 63 bar.style.width = elNewX + \'px\' 64 bar.style.height = \'50px\' 65 } else { 66 el.style.left = \'350px\' 67 bar.style.width = \'350px\' 68 bar.style.height = \'50px\' 69 } 70 // img.style.left = elNewX + \'px\' 71 // el.style.top = elNewY + \'px\' 72 } 73 } 74 // 按下鼠标 75 function down() { 76 flag = true 77 downX = event.pageX 78 downY = event.pageY 79 elX = el.offsetLeft 80 elY = el.offsetTop 81 mvElX = downX - elX 82 mvElY = downY - elY 83 el.style.transition = \'none\' 84 bar.style.transition = \'none\' 85 window.addEventListener("mousemove", move) 86 window.addEventListener("mouseup", up) 87 }
版权声明：本文为girlalittle原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。