欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式

 更新時(shí)間：2018年11月26日 15:21:37   作者：騎碼行天下  
這篇文章主要介紹了驗(yàn)證碼功能的三種實(shí)現(xiàn)方式,分為數(shù)字短信驗(yàn)證碼，圖形驗(yàn)證碼，滑動(dòng)驗(yàn)證碼，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

摘要：

我們?cè)谧鲆恍┖笈_(tái)系統(tǒng)的登錄驗(yàn)證的時(shí)候。難免會(huì)用到驗(yàn)證碼功能，來(lái)輔助進(jìn)行驗(yàn)證，提高安全性，在我們?nèi)粘Ｉ钪?，?yàn)證方式無(wú)處不在，最多的是短信驗(yàn)證碼的方式，通過(guò)點(diǎn)擊發(fā)送驗(yàn)證碼，然后手機(jī)接收短信，填寫(xiě)驗(yàn)證碼才能登陸成功，但是也有一些其他驗(yàn)證碼功能也在使用，所以，我就想著來(lái)集中記錄一下，希望對(duì)大家有所幫助...

一.數(shù)字短信驗(yàn)證碼

思路：

a.兩個(gè)文本框+一個(gè)獲取驗(yàn)證碼按鈕，文本框用來(lái)輸入手機(jī)號(hào)和獲取到的驗(yàn)證碼，按鈕負(fù)責(zé)點(diǎn)擊和記錄倒計(jì)時(shí)；

b.js書(shū)寫(xiě)定時(shí)器setTimeout，進(jìn)行60秒驗(yàn)證碼失效時(shí)間記錄；

c.后臺(tái)提供短信獲取驗(yàn)證的接口，我們把手機(jī)號(hào)作為參數(shù)上傳，后臺(tái)獲取到后給該手機(jī)號(hào)下發(fā)驗(yàn)證碼；

效果圖展示：

例1.0：點(diǎn)擊按鈕發(fā)送驗(yàn)證碼效果圖

例2.0：短信接收截圖

代碼展示：

html

<input type="text" name="phone" id="phone" value="" placeholder="請(qǐng)輸入手機(jī)號(hào)" maxlength="11" />
<input type="" name="verCode" id="verCode" value="" placeholder="請(qǐng)輸入驗(yàn)證碼" maxlength="6"/>
<input type="button" name="" id="verCodeBtn" value="獲取驗(yàn)證碼" onclick="settime(this);"/>

css

<--博主偷點(diǎn)小懶，省略，看不慣就關(guān)注我啊-->

倒計(jì)時(shí)js

//驗(yàn)證碼
var counts = 60;

function settime(val) {
 if(counts == 0) {
  val.removeAttribute("disabled");
  val.value = "獲取驗(yàn)證碼";
  counts = 60;
  return false;
 } else {
  val.setAttribute("disabled", true);
  val.value = "重新發(fā)送（" + counts + "）";
  counts--;
 }
 setTimeout(function() {
  settime(val);
 }, 1000);
}

Ajax接口代碼js

$(function(){
 //獲取驗(yàn)證碼
 $("#verCodeBtn").click(function() {
  var userinfo = {
   "UserPhoneNum": '86//' + $("input[name='phone']").val()
  }
  $.ajax({
   url: "https://www.xxxxx.cn/user/sendcode/",
   data: userinfo,
   type: "get",
   success: function(data) {
    if(JSON.parse(data).state === 404 || JSON.parse(data).state === 202 || userinfo.UserPhoneNum === '86//') {
     alert("驗(yàn)證碼發(fā)送失敗")
    } else {
     alert("驗(yàn)證碼發(fā)送成功，請(qǐng)耐心等待")
    }
   },
   error: function() {
    alert("發(fā)送失敗");
   }
  });
 });
})

二.圖形驗(yàn)證碼

概要：一般的圖形驗(yàn)證碼就像上方的短信驗(yàn)證碼一樣，就是后臺(tái)生成的驗(yàn)證碼圖片返回給前端的，那樣的話就比較簡(jiǎn)單，因?yàn)閺?fù)雜的都讓后臺(tái)解決了，我在這里主要說(shuō)的是另一種，就是不調(diào)用后臺(tái)接口，通過(guò)canvas畫(huà)布來(lái)解決圖形驗(yàn)證碼。

思路：

a.一個(gè)文本框用來(lái)輸入由數(shù)字和字母組合的驗(yàn)證碼+一個(gè)畫(huà)布標(biāo)簽來(lái)顯示圖形驗(yàn)證碼+一個(gè)提交按鈕；

b.提交按鈕進(jìn)行表單驗(yàn)證，輸入正確或者錯(cuò)誤進(jìn)行相應(yīng)的提示；

c.用畫(huà)布生成并渲染出驗(yàn)證碼圖形，并且得到隨機(jī)的顏色值；

效果圖展示：

例3.0基礎(chǔ)圖片展示

例4.0提交成功效果展示

例5.0提交失敗效果展示

代碼展示：

HTML

<div class="code">
  <input type="text" value="" placeholder="請(qǐng)輸入驗(yàn)證碼（不區(qū)分大小寫(xiě)）" class="input-val">
  <canvas id="canvas" width="100" height="30"></canvas>
  <button class="btn">提交</button>
 </div>

css

<style>
  .input-val {
  width: 200px;
  height: 32px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  }
  #canvas {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
  }
  .btn {
  display: block;
  margin-top: 20px;
  height: 32px;
  width: 100px;
  font-size: 16px;
  color: #fff;
  background-color: #457adb;
  border: none;
  border-radius: 50px;
  }
 </style>

js

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
 $(function(){
  var show_num = [];
  draw(show_num);
  $("#canvas").on('click',function(){
   draw(show_num);
  })
  $(".btn").on('click',function(){
   var val = $(".input-val").val().toLowerCase();
   var num = show_num.join("");
   if(val==''){
    alert('請(qǐng)輸入驗(yàn)證碼！');
   }else if(val == num){
    alert('提交成功！');
    $(".input-val").val('');
    // draw(show_num);
   }else{
    alert('驗(yàn)證碼錯(cuò)誤！請(qǐng)重新輸入！');
    $(".input-val").val('');
    // draw(show_num);
   }
  })
 })
 //生成并渲染出驗(yàn)證碼圖形
 function draw(show_num) {
  var canvas_width=$('#canvas').width();
  var canvas_height=$('#canvas').height();
  var canvas = document.getElementById("canvas");//獲取到canvas的對(duì)象，演員
  var context = canvas.getContext("2d");//獲取到canvas畫(huà)圖的環(huán)境，演員表演的舞臺(tái)
  canvas.width = canvas_width;
  canvas.height = canvas_height;
  var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
  var aCode = sCode.split(",");
  var aLength = aCode.length;//獲取到數(shù)組的長(zhǎng)度
  for (var i = 0; i < 4; i++) { //這里的for循環(huán)可以控制驗(yàn)證碼位數(shù)（如果想顯示6位數(shù)，4改成6即可）
   var j = Math.floor(Math.random() * aLength);//獲取到隨機(jī)的索引值
   // var deg = Math.random() * 30 * Math.PI / 180;//產(chǎn)生0~30之間的隨機(jī)弧度
   var deg = Math.random() - 0.5; //產(chǎn)生一個(gè)隨機(jī)弧度
   var txt = aCode[j];//得到隨機(jī)的一個(gè)內(nèi)容
   show_num[i] = txt.toLowerCase();
   var x = 10 + i * 20;//文字在canvas上的x坐標(biāo)
   var y = 20 + Math.random() * 8;//文字在canvas上的y坐標(biāo)
   context.font = "bold 23px 微軟雅黑";
   context.translate(x, y);
   context.rotate(deg);
   context.fillStyle = randomColor();
   context.fillText(txt, 0, 0);
   context.rotate(-deg);
   context.translate(-x, -y);
  }
  for (var i = 0; i <= 5; i++) { //驗(yàn)證碼上顯示線條
   context.strokeStyle = randomColor();
   context.beginPath();
   context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
   context.stroke();
  }
  for (var i = 0; i <= 30; i++) { //驗(yàn)證碼上顯示小點(diǎn)
   context.strokeStyle = randomColor();
   context.beginPath();
   var x = Math.random() * canvas_width;
   var y = Math.random() * canvas_height;
   context.moveTo(x, y);
   context.lineTo(x + 1, y + 1);
   context.stroke();
  }
 }
 //得到隨機(jī)的顏色值
 function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + "," + g + "," + b + ")";
 }
</script>

三.滑動(dòng)驗(yàn)證碼

摘要：博客園登錄的時(shí)候就用到了這個(gè)滑塊登錄，是完成拼圖形式的，我下面這個(gè)原理是一樣的，邏輯是根據(jù)鼠標(biāo)滑動(dòng)軌跡，坐標(biāo)位置，計(jì)算拖動(dòng)速度等等來(lái)判斷是否人為操作，如果小伙伴想做和博客園效果一樣的，那么可以用來(lái)做參考。

思路：

a.由三個(gè)div組成，構(gòu)成了滑塊和底部進(jìn)度條的效果；

b.書(shū)寫(xiě)js,注冊(cè)鼠標(biāo)按下，懸浮，松開(kāi)事件；

c.記錄滑塊移動(dòng)的距離和狀態(tài)進(jìn)行判斷是否成功；

效果圖展示：

例6.0：滑動(dòng)驗(yàn)證碼初始狀態(tài)

例7.0：滑動(dòng)狀態(tài)

例8.0：成功狀態(tài)

代碼展示：

html

<div class="drag">
  <div class="bg"></div>
  <div class="text" onselectstart="return false;">請(qǐng)拖動(dòng)滑塊解鎖</div>
  <div class="btn">&gt;&gt;</div>
</div>

css

<style>
  .drag{
   width: 300px;
   height: 40px;
   line-height: 40px;
   background-color: #e8e8e8;
   position: relative;
   margin:0 auto;
  }
  .bg{
   width:40px;
   height: 100%;
   position: absolute;
   background-color: #75CDF9;
  }
  .text{
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   user-select: none;
  }
  .btn{
   width:40px;
   height: 38px;
   position: absolute;
   border:1px solid #ccc;
   cursor: move;
   font-family: "宋體";
   text-align: center;
   background-color: #fff;
   user-select: none;
   color:#666;
  }
</style>

js

<script>
  //一、定義一個(gè)獲取DOM元素的方法
  var $ = function(selector){
    return document.querySelector(selector);
   },
   box = $(".drag"),//容器
   bg = $(".bg"),//背景
   text = $(".text"),//文字
   btn = $(".btn"),//滑塊
   success = false,//是否通過(guò)驗(yàn)證的標(biāo)志
   distance = box.offsetWidth - btn.offsetWidth;//滑動(dòng)成功的寬度（距離）
  //二、給滑塊注冊(cè)鼠標(biāo)按下事件
  btn.onmousedown = function(e){
   //1.鼠標(biāo)按下之前必須清除掉后面設(shè)置的過(guò)渡屬性
   btn.style.transition = "";
   bg.style.transition ="";
   //說(shuō)明：clientX 事件屬性會(huì)返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針向?qū)τ跒g覽器頁(yè)面(或客戶區(qū))的水平坐標(biāo)。
   //2.當(dāng)滑塊位于初始位置時(shí)，得到鼠標(biāo)按下時(shí)的水平位置
   var e = e || window.event;
   var downX = e.clientX;
   //三、給文檔注冊(cè)鼠標(biāo)移動(dòng)事件
   document.onmousemove = function(e){
    var e = e || window.event;
    //1.獲取鼠標(biāo)移動(dòng)后的水平位置
    var moveX = e.clientX;
    //2.得到鼠標(biāo)水平位置的偏移量（鼠標(biāo)移動(dòng)時(shí)的位置 - 鼠標(biāo)按下時(shí)的位置）
    var offsetX = moveX - downX;
    //3.在這里判斷一下：鼠標(biāo)水平移動(dòng)的距離 與 滑動(dòng)成功的距離 之間的關(guān)系
    if( offsetX > distance){
     offsetX = distance;//如果滑過(guò)了終點(diǎn)，就將它停留在終點(diǎn)位置
    }else if( offsetX < 0){
     offsetX = 0;//如果滑到了起點(diǎn)的左側(cè)，就將它重置為起點(diǎn)位置
    }
    //4.根據(jù)鼠標(biāo)移動(dòng)的距離來(lái)動(dòng)態(tài)設(shè)置滑塊的偏移量和背景顏色的寬度
    btn.style.left = offsetX + "px";
    bg.style.width = offsetX + "px";
    //如果鼠標(biāo)的水平移動(dòng)距離 = 滑動(dòng)成功的寬度
    if( offsetX == distance){
     //1.設(shè)置滑動(dòng)成功后的樣式
     text.innerHTML = "驗(yàn)證通過(guò)";
     text.style.color = "#fff";
     btn.innerHTML = "&radic;";
     btn.style.color = "green";
     bg.style.backgroundColor = "lightgreen";
     //2.設(shè)置滑動(dòng)成功后的狀態(tài)
     success = true;
     //成功后，清除掉鼠標(biāo)按下事件和移動(dòng)事件（因?yàn)橐苿?dòng)時(shí)并不會(huì)涉及到鼠標(biāo)松開(kāi)事件）
     btn.onmousedown = null;
     document.onmousemove = null;
     //3.成功解鎖后的回調(diào)函數(shù)
     setTimeout(function(){
      alert('解鎖成功！');
     },100);
    }
   }
   //四、給文檔注冊(cè)鼠標(biāo)松開(kāi)事件
   document.onmouseup = function(e){
    //如果鼠標(biāo)松開(kāi)時(shí)，滑到了終點(diǎn)，則驗(yàn)證通過(guò)
    if(success){
     return;
    }else{
     //反之，則將滑塊復(fù)位（設(shè)置了1s的屬性過(guò)渡效果）
     btn.style.left = 0;
     bg.style.width = 0;
     btn.style.transition = "left 1s ease";
     bg.style.transition = "width 1s ease";
    }
    //只要鼠標(biāo)松開(kāi)了，說(shuō)明此時(shí)不需要拖動(dòng)滑塊了，那么就清除鼠標(biāo)移動(dòng)和松開(kāi)事件。
    document.onmousemove = null;
    document.onmouseup = null;
   }
  }
</script>

總結(jié)

以上所述是小編給大家介紹的驗(yàn)證碼功能的三種實(shí)現(xiàn)方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論