h5寫隨機驗證碼（四位隨機數字）

效果：

 

 代碼：

html：

            <!-- 驗證碼2 -->

            <div class="loginbox_in">

              <div class="loginbox_in_icon2">

                <img src="images/login2_06.jpg" />

              </div>

              <div class="loginbox_in_input">

                <input type="text" placeholder="請輸入驗證碼" class="in_input" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')">

              </div>

              <!-- 驗證圖 -->

              <div class="loginbox_in_yan">

                <canvas id="canvas1" width="100%"></canvas>

              </div>

            </div>

 

js：

<!-- 生成驗證碼 -->

<script>

    /*定義函數生成隨機顏色*/

    function colorRandom(){

        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+")";

    }

    /*生成隨機數*/

    var canvas,context;

    function getYZ(){

        canvas = document.getElementById("canvas1");

        context = canvas.getContext('2d');

        // canvas.width = 200;

        canvas.height = 94;

        context.beginPath();

        context.fillStyle = colorRandom();//顯示驗證碼區域的背景色

        context.rect(0,55,100,40);

        // context.rect(0,0,0,40);

        context.fill();

        for(var i = 0;i<4;i++){

            context.font =( Math.random()*20+16)+"px 微軟雅黑";//數字隨機大小

            context.fillStyle = colorRandom();//數字顏色

            context.fillText(parseInt(Math.random()*9), 20*i,90);   //0-9的隨機數

        }

    }

    /*實現*/

    window.onload = function(){

        getYZ();

        document.getElementById("canvas1").onclick = function(){

            getYZ();

        }

    }

</script>

 

css：（驗證圖的）

 

.loginbox_in_yan {

    display: flex;

    width: 100px;

    height: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 2px;

}

 

------------------------------------------------------------------------------------------

因為上面的隨機數要判斷，獲取不到，所以換成了下面的方法：

效果：

 

 html：

<!-- 驗證碼2 -->

            <div class="loginbox_in">

              <div class="loginbox_in_icon2">

                <img src="images/login2_06.jpg" />

              </div>

              <div class="loginbox_in_input">

                <input type="text" placeholder="請輸入驗證碼" class="in_input" onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')">

              </div>

              <!-- 驗證圖 -->

              <div class="loginbox_in_yan" id="login" onclick="change()"></div>

            </div>

js：

<!-- 生成驗證碼 -->

<script>

    // 新的

    function getCode(n) {

        var all = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";

        var b = "";

        for (var i = 0; i < n; i++) {

            var index = Math.floor(Math.random() * 62);

            b += all.charAt(index);

        }

        return b;

    };

    function change() {

        var newsuiji = getCode(4);

        console.log(newsuiji);

        document.getElementById("login").innerHTML = newsuiji;

    }

    window.onload = change;

</script>

 

css：

.loginbox_in_yan {

    width: 100px;

    height: 100%;

    position: relative;

    overflow: hidden;

    border-radius: 2px;

    color: rgba(62, 94, 136,0.5);

    background-color: #c8d4d8;

    /* 給背景添加雜點 */

    background-image: url(data:image/png;base64,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);

    cursor: pointer;

    font-size: 20px;

    letter-spacing: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

    /* 禁止復制 */

    user-select:none;

}