js實現(xiàn)驗證碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            border: 1px solid black;
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .btnk{
            color:blue;
            cursor: pointer;
        }
        .txt{
            display: inline-block;
            position: relative;
        }
    </style>
</head>
<body>
<div class="block">
</div>
<span class="btnk">看不清....</span>
<br>
<input id="yz" type="text">
<button id="btn">驗證</button>
<script>
    var allnumber="";         //定義一個全局變量allnumber
    var b=document.getElementsByClassName("block")[0];    //獲取class名為block的div元素
    var btnk=document.getElementsByClassName("btnk")[0];    //獲取class名為btnk的span元素
    var yz=document.getElementById("yz");               //獲取id名為yz的input元素
    var btn=document.getElementById("btn");               //獲取id名為btn的button元素
 
    //添加驗證按鈕的點擊事件
    btn.οnclick=function(){
        if(yz.value==allnumber.toLowerCase()){
            alert("成功");
        }
        else{
        //失敗時提醒錯誤，并再次調(diào)用函數(shù)
            alert("驗證碼錯誤");
            randomNumber();
        }
    }
 
    //添加看不清span元素的點擊事件
    btnk.οnclick=function(){
        randomNumber();
    }
 
    //調(diào)用函數(shù)
    randomNumber();
    //生成驗證碼
    function randomNumber(){
        allnumber="";      //每次執(zhí)行函數(shù)時都清空之前的allnumber
        b.innerHTML="";    //每次執(zhí)行函數(shù)時都清空之前的b.innerHTML
        //循環(huán)控制生成六位字符
        for(var i=0;i<6;i++){   
            var num=Math.random()*100;   //用隨機數(shù)來控制生成數(shù)字，大寫字母和小寫字母的概率
            if(num<=50)   //生成數(shù)字的概率為50% 
            {
                var n=Math.floor(Math.random()*10);   //先把生成的隨機數(shù)*10擴大為0~10再對其進行向下取整
                allnumber+=n;      //把n的值累加給到allnumber
                b.innerHTML+="<span class='txt'>"+n+"</span>";  //把n的值累加給b.innerHTML，在兩邊加上span標(biāo)簽
            }
            else if(num>50&&num<=80)    //生成大寫字母的概率為30%
            {
                var n=String.fromCharCode(Math.floor(Math.random()*26+97)); //利用大寫字母的ascii值來生成隨機大寫字母
                allnumber+=n;    
                b.innerHTML+="<span class='txt'>"+n+"</span>";
            }
            else{
                var n=String.fromCharCode(Math.floor(Math.random()*26+65)); //利用小寫字母的ascii值來生成隨機小寫字母
                allnumber+=n;
                b.innerHTML+="<span class='txt'>"+n+"</span>";
            }
 
        }
        randomStyle();  //在randomNumber()中調(diào)用randomStyle()
    }
    //用來控制隨機字符的樣式
    function randomStyle(){
       var spn_t=document.getElementsByClassName("txt");  //獲取span元素txt
        //循環(huán)控制每個字符的樣式
        for(var i=0;i<spn_t.length;i++){
            spn_t[i].style.color="rgb("+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+","+Math.floor(Math.random()*225)+")"     //用隨機的三位rgb值來控制字體的顏色
            spn_t[i].style.fontSize=(Math.random()*30+15)+"px";   
            spn_t[i].style.fontWeight=Math.random()*600+300;
            spn_t[i].style.transform="rotatez("+(Math.random()*90-45)+"+deg)"; //隨機的翻轉(zhuǎn)角度來控制字體的傾斜
        }
    }
 
</script>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「yixiiii」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/yigetongzi/article/details/81974545
?著作權(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ù)。

相關(guān)閱讀更多精彩內(nèi)容

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