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

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

//驗(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);
}

$(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ā)送成功，請耐心等待")
    }
   },
   error: function() {
    alert("發(fā)送失敗");
   }
  });
 });
})

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

<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>

<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('請輸入驗(yàn)證碼！');
   }else if(val == num){
    alert('提交成功！');
    $(".input-val").val('');
    // draw(show_num);
   }else{
    alert('驗(yàn)證碼錯(cuò)誤！請重新輸入！');
    $(".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的對象，演員
  var context = canvas.getContext("2d");//獲取到canvas畫圖的環(huán)境，演員表演的舞臺
  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ù)組的長度
  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>

<div class="drag">
  <div class="bg"></div>
  <div class="text" onselectstart="return false;">請拖動滑塊解鎖</div>
  <div class="btn">&gt;&gt;</div>
</div>

<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>

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