原生js實作驗證碼的產生方法（完整程式碼）-js教程-PHP中文網

首頁

web前端

js教程

原生js實作驗證碼的產生方法（完整程式碼）

不言

Aug 23, 2018 pm 02:10 PM

驗證碼

這篇文章帶給大家的內容是關於原生js實作驗證碼的生成方法（完整程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 150px;
            height: 50px;
            line-height: 50px;
            border: 1px solid silver;
            background:url("./img/bg1.png")no-repeat;
            background-size:120% ;
            text-align: center;
        }
        .btn{
            color: green;
            background-color: #d6ffe1;
            cursor: pointer;
        }
        .yztxt{
            width: 150px;
            height: 20px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
<p class="block"></p>
<span class="btn">看不清....</span><br>
<input class="yztxt" type="text"><br>
<button class="yz">验证</button>
<script>
    var b=document.getElementsByClassName("block")[0];
    var btn=document.getElementsByClassName("btn")[0];
    var s=document.getElementsByClassName("txt");
    var yztxt=document.getElementsByClassName("yztxt")[0];
    var yz=document.getElementsByClassName("yz")[0];
    var numrous=""; //定义一个空数组 用来存放生成的验证码
    yz.onclick=function(){  //给验证按钮一个方法 判断验证码是否输入正确
        if(yztxt.value.length<=0){
            alert("请输入验证码：")
        }
         else if(yztxt.value== numrous.toLowerCase()){
            alert("验证成功！");
        }
        else{
            alert("验证失败！");
            nrandom();//验证失败重新调随机产生验证码的函数
        }
    };

    btn.onclick=function(){//当鼠标点击看不清时，切换验证码
        nrandom();
    };
    nrandom();
    function nrandom(){
        numrous="";//在产生下一组验证码，清空上次验证码
        b.innerHTML="";//清空文本框中验证码
        for(var i=0;i<6;i++){
             var num=Math.random()*100; //产生数字，大小写字母的总概率100
            if(num<=50){
                //数字产生的概率50%
                var n=Math.floor(Math.random()*10);
                numrous+=n;//将随机产生的数字放在字符串numrous
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";//将随机产生的数字在文本框中显示
            }
            else if(num>=50&&num<=80){
                //产生小写字母的概率为30%
                var n =String.fromCharCode(Math.floor(Math.random()*25+97));
                numrous+=n;
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";
            }
            else{
                //产生大写字母的概率20%
                var n =String.fromCharCode(Math.floor(Math.random()*25+65));
                numrous+=n;
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";
            }
        }
        stylezi();//调用验证码字体样式
    }
    //下面分别设置了验证码的颜色，大小，粗细，距左的距离以及倾斜角度
   function stylezi(){
        for(var i=0;i< s.length;i++){
            s[i].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
            s[i].style.fontSize=(Math.random()*20+15)+"px";
            s[i].style.fontWeight=Math.random()*300+200;
            s[i].style.left=(Math.random()*20-10)+"px";
            s[i].style.transform="rotatez("+Math.random()*90-45+"deg)";
        }
    }
</script>
</body>
</html>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7843

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

Google瀏覽器不顯示驗證碼圖片怎麼辦?chrome瀏覽器不顯示驗證碼? Mar 13, 2024 pm 08:55 PM

谷歌瀏覽器不顯示驗證碼圖片怎麼辦？在使用Google瀏覽器登入網頁有時候需要驗證碼驗證。部分使用者在使用圖片驗證碼的時候發現Google瀏覽器無法正常顯示圖片的內容。這該怎麼辦呢？下面小編帶來Google瀏覽器驗證碼不顯示處理方法介紹，希望對大家有幫助！　　方法介紹　　1、進入軟體，點選右上角的「更多」按鈕，選擇下方選項清單中的「設定」進入。　　2、進入新介面後，點選左側的「隱私設定與安全性」選項。　　3、接著點擊右側中的「網站設定&rdquo

PHP圖片處理案例：如何實作圖片的驗證碼功能 Aug 17, 2023 pm 12:09 PM

PHP圖片處理案例：如何實現圖片的驗證碼功能隨著互聯網的快速發展，驗證碼成為了保護網站安全的重要手段之一。驗證碼是一種透過影像辨識技術來確定使用者是否為真實使用者的驗證方式。本文將介紹如何使用PHP來實現圖片的驗證碼功能，並附帶程式碼範例。簡介驗證碼是一張包含隨機字元的圖片，使用者需要輸入圖片中的字元才能通過驗證。實現驗證碼的主要過程包括產生隨機字元、繪製字元到圖片

虛擬號碼可以接收驗證碼嗎 Jan 02, 2024 am 10:22 AM

虛擬號碼可以接收驗證碼，只要註冊時填寫的手機號碼符合規定，並且能夠正常接通手機號，就可以收到簡訊驗證碼。不過，使用虛擬手機號碼要注意，部分網站不支援虛擬手機號碼註冊，因此需要選擇正規的虛擬手機號碼服務商。

驗證碼攔不住機器人了！谷歌AI已能精準辨識模糊文字，GPT-4則裝瞎求人幫忙 Apr 12, 2023 am 09:46 AM

「最煩登網站時各種奇奇怪怪（甚至變態）的驗證碼了。」現在，有一個好消息和一個壞消息。好消息就是：AI可以幫你代勞這件事了。不信你瞧，以下是三張辨識難度依序遞增的真實案例：而這些是一個名為「Pix2Struct」的模型給出的答案：全部準確無誤、一字不差有沒有？有網友感嘆：確定，準確度比我強。所以可不可以做成瀏覽器插件？？不錯，有人表示：別看這幾個案例相比還算簡單，但凡微調一下，我都不敢想像其效果有多厲害了。所以，壞消息就是──驗證碼馬上就要攔不住機器人了！（危險危險危險…）如何做到？ Pix2St

手機為什麼收不到驗證碼 Aug 17, 2023 pm 02:49 PM

手機收不到驗證碼是網路問題、手機設定問題、手機電信業者問題和個人設定問題導致的。詳情介紹：1、網路問題，手機所處的網路環境不穩定或訊號弱，就有可能導致驗證碼無法及時送達；2、手機設定問題，不小心將手機的簡訊或語音功能關閉，或將驗證碼的發送號碼加入黑名單中，導致驗證碼無法正常收到；3、手機電信業者問題，手機業者可能會故障或維護，導致驗證碼無法及時送達等等。

PHP開髮指南：實作驗證碼登入 Jul 01, 2023 am 09:27 AM

隨著網路的發展和智慧型手機的普及，驗證碼登入功能被越來越多的網站和應用程式採用。驗證碼登入是一種透過輸入正確的驗證碼來驗證使用者身分的登入方式，以提高安全性和防止惡意攻擊。在PHP開發中，實作簡單的驗證碼登入功能並不複雜，可以透過以下步驟來完成。建立資料庫表首先，我們需要在資料庫中建立一個用於儲存驗證碼資訊的表。表格結構可以包含以下欄位：id:自增主鍵phon

如何使用PHP建立驗證碼圖片？ Sep 13, 2023 am 11:40 AM

如何使用PHP建立驗證碼圖片？驗證碼（CAPTCHA）是一種常用的驗證使用者是否為人而非機器的方法。在網站上，我們經常會看到驗證碼圖片，要求使用者輸入圖片上顯示的隨機字元或數字，以完成登入、註冊、評論等操作。本文將介紹如何使用PHP建立驗證碼圖片，並提供具體的程式碼範例。一、PHPGD庫要建立驗證碼圖片，我們需要使用PHP的GD庫。 GD庫是用來處理影像的擴

用OCR技術，自動辨識各種驗證碼，工具已開源 May 25, 2023 am 10:07 AM

今天我在跟大家分享一個OCR應用程式－ddddocr自動辨識驗證碼。前面4個d是「帶弟弟」的首拼音。 [/笑哭]。專案地址：https://github.com/sml2h3/ddddocr。使用的時候用pip指令直接安裝即可pipinstallddddocr。 OCR的核心技術包含兩面，一是目標偵測模型偵測圖片中的文字，二是文字辨識模型，將圖片中的文字轉成文字文字。第一類驗證碼最簡單，它們沒有複雜的背景圖片，所以目標偵測模型可以省略，直接將圖片送入文字辨識模型即可。識別碼如下：impor

See all articles

原生js實作驗證碼的產生方法（完整程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題