前端圖形滑動驗證碼

通過canvas畫布來解決圖形驗證碼。

思路：

  • a.一個文本框用來輸入由數(shù)字和字母組合的驗證碼+一個畫布標(biāo)簽來顯示圖形驗證碼+一個提交按鈕；
  • b.提交按鈕進(jìn)行表單驗證，輸入正確或者錯誤進(jìn)行相應(yīng)的提示；

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


    效果圖

index.html

記得引入jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="code">
        <input type="text" value="" placeholder="請輸入驗證碼（不區(qū)分大小寫）" class="input-val">
        <canvas id="canvas" width="100" height="30"></canvas>
        <button class="btn">提交</button>
    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.css

.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;
}

index.js

$(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('請輸入驗證碼！');
        }else if(val == num){
            alert('提交成功！');
            $(".input-val").val('');
            // draw(show_num);

        }else{
            alert('驗證碼錯誤！請重新輸入！');
            $(".input-val").val('');
            // draw(show_num);
        }
    })
})

//生成并渲染出驗證碼圖形
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)可以控制驗證碼位數(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)生一個隨機(jī)弧度
        var txt = aCode[j];//得到隨機(jī)的一個內(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++) { //驗證碼上顯示線條
        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++) { //驗證碼上顯示小點
        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 + ")";
}

滑動驗證碼

思路：
a.由三個div組成，構(gòu)成了滑塊和底部進(jìn)度條的效果；
b.書寫js,注冊鼠標(biāo)按下，懸浮，松開事件；
c.記錄滑塊移動的距離和狀態(tài)進(jìn)行判斷是否成功；


效果圖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="drag">
        <div class="bg"></div>
        <div class="text" onselectstart="return false;">請拖動滑塊解鎖</div>
        <div class="btn">&gt;&gt;</div>
</div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

index.css

.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;
}

index.js

 //一、定義一個獲取DOM元素的方法
 var $ = function(selector){
    return  document.querySelector(selector);
},
box = $(".drag"),//容器
bg = $(".bg"),//背景
text = $(".text"),//文字
btn = $(".btn"),//滑塊
success = false,//是否通過驗證的標(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ā)時，鼠標(biāo)指針向?qū)τ跒g覽器頁面(或客戶區(qū))的水平坐標(biāo)。

//2.當(dāng)滑塊位于初始位置時，得到鼠標(biāo)按下時的水平位置
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)移動時的位置 - 鼠標(biāo)按下時的位置）
    var offsetX = moveX - downX;

    //3.在這里判斷一下：鼠標(biāo)水平移動的距離 與 滑動成功的距離 之間的關(guān)系
    if( offsetX > distance){
        offsetX = distance;//如果滑過了終點，就將它停留在終點位置
    }else if( offsetX < 0){
        offsetX = 0;//如果滑到了起點的左側(cè)，就將它重置為起點位置
    }

    //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 = "驗證通過";
        text.style.color = "#fff";
        btn.innerHTML = "&radic;";
        btn.style.color = "green";
        bg.style.backgroundColor = "lightgreen";

        //2.設(shè)置滑動成功后的狀態(tài)
        success = true;
        //成功后，清除掉鼠標(biāo)按下事件和移動事件（因為移動時并不會涉及到鼠標(biāo)松開事件）
        btn.onmousedown = null;
        document.onmousemove = null;

        //3.成功解鎖后的回調(diào)函數(shù)
        setTimeout(function(){
            alert('解鎖成功！');
        },100);
    }
}

//四、給文檔注冊鼠標(biāo)松開事件
document.onmouseup = function(e){

    //如果鼠標(biāo)松開時，滑到了終點，則驗證通過
    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)松開了，說明此時不需要拖動滑塊了，那么就清除鼠標(biāo)移動和松開事件。
    document.onmousemove = null;
    document.onmouseup = null;
}
}

原文地址:
https://www.cnblogs.com/hejun26/p/10020234.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容