JavaScript（二十五）数字字母汉字验证码demo

最新推荐文章于 2023-04-04 21:31:55 发布

原创最新推荐文章于 2023-04-04 21:31:55 发布 · 318 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了一个使用HTML、CSS和JavaScript实现的动态验证码生成与验证系统。该系统能够生成包含数字、字母及汉字的扭曲效果验证码，并提供刷新和验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

验证码效果图

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            width: 100px;
            height: 40px;
            border: 1px solid silver;
            float: left;
            background-image: url("./image/1.png");
            background-size: 100px 40px;
            overflow: hidden;
        }

        #kk {
            float: left;
            color: blue;
            font-size: 12px;
            position: relative;
            top: 28px;
            left: 5px;
            cursor: pointer;
        }

        .num {
            display: inline-block;
            line-height: 40px;
            width: 16.5px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <div class="block"></div>
    <span id="kk">看不清...</span>
</div>
<div style="clear: both">
    <input type="text" id="res"/>
    <button id="btnres">验证</button>
</div>

<script>
    var block = document.getElementsByClassName("block")[0];
    var res = ""; //随机产生的数字   做比较
    showData();
    function showData() {
        var ele = ""; //标签
        for (var i = 0; i < 6; i++) {

            /*产生数字*/
            if(Math.random ()<0.4)
            {
                var number = Math.floor(Math.random() * 10);  //产生数字0-9
                ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + number + "</span>";
                res += number;
            }
            //产生字母
            else if(Math.random ()<0.8&&Math.random ()>0.4)
            {
                var zimu=97+Math.floor(Math.random()*26);    //随机产生26个字母的ascii码
                var str="";
                if(Math.random ()<0.5){
                    str = String.fromCharCode(zimu).toUpperCase();// ascii码转字母
                }
                else{
                    str = String.fromCharCode(zimu).toLowerCase ();// ascii码转字母
                }

                ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + str + "</span>";
                res += str;
            }
            //产生汉字
            else
            {
            var text="昨夜雨疏风骤浓睡不消残酒试问卷帘人却道海棠依旧知否知否应是绿肥红瘦";
                var index=Math.floor (Math.random()*text.length);
                ele += "<span class='num' style='transform:rotate(" + (Math.random() - 0.5) * 80 + "deg);font-size:" + Math.floor((Math.random() * 8) + 12) + "px;color:rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")'>" + text.charAt (index )+ "</span>";
                res += text.charAt (index );
            }
        }
        block.innerHTML = ele;
    }
    //看不清
    var kk = document.getElementById("kk");
    kk.onclick = function () {
        showData()
    };

    //验证
    var restext=document.getElementById ("res");
    var btnres=document.getElementById ("btnres");
    btnres.onclick=function (){

        if(restext.value.toLowerCase()==res.toLowerCase ()){
            alert("验证成功");
        }
        else{
            alert("验证失败");
            showData ();
            restext.value="";

        }
    }

</script>
</body>
</html>