原生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>

相關推薦：

js在網頁上顯示時間的程式碼實作

js如何產生二維碼？ js產生二維碼的方法（程式碼）

以上是原生js實作驗證碼的產生方法（完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

手机为什么收不到验证码Aug 17, 2023 pm 02:49 PM

手机收不到验证码是网络问题、手机设置问题、手机运营商问题和个人设置问题导致的。详情介绍：1、网络问题，手机所处的网络环境不稳定或者信号弱，就有可能导致验证码无法及时送达；2、手机设置问题，不小心将手机的短信或语音功能关闭，或者将验证码的发送号码加入到黑名单中，从而导致验证码无法正常收到；3、手机运营商问题，手机运营商可能会出现故障或者维护，导致验证码无法及时送达等等。

PHP图片处理案例：如何实现图片的验证码功能Aug 17, 2023 pm 12:09 PM

PHP图片处理案例：如何实现图片的验证码功能随着互联网的快速发展，验证码成为了保护网站安全的重要手段之一。验证码是一种通过图像识别技术来确定用户是否为真实用户的验证方式。本文将介绍如何使用PHP来实现图片的验证码功能，并附带代码示例。简介验证码是一张包含随机字符的图片，用户需要输入图片中的字符才能通过验证。实现验证码的主要过程包括生成随机字符、绘制字符到图片

验证码拦不住机器人了！谷歌AI已能精准识别模糊文字，GPT-4则装瞎求人帮忙Apr 12, 2023 am 09:46 AM

“最烦登网站时各种奇奇怪怪（甚至变态）的验证码了。”现在，有一个好消息和一个坏消息。好消息就是：AI可以帮你代劳这件事了。不信你瞧，以下是三张识别难度依次递增的真实案例：而这些是一个名为“Pix2Struct”的模型给出的答案：全部准确无误、一字不差有没有？有网友感叹：确定，准确性比我强。所以可不可以做成浏览器插件？？不错，有人表示：别看这几个案例相比还算简单，但凡微调一下，我都不敢想象其效果有多厉害了。所以，坏消息就是——验证码马上就要拦不住机器人了！（危险危险危险……）如何做到？Pix2St

PHP开发指南：实现验证码登录Jul 01, 2023 am 09:27 AM

随着互联网的发展和智能手机的普及，验证码登录功能被越来越多的网站和应用程序采用。验证码登录是一种通过输入正确的验证码来验证用户身份的登录方式，以提高安全性和防止恶意攻击。在PHP开发中，实现简单的验证码登录功能并不复杂，可以通过以下步骤来完成。创建数据库表首先，我们需要在数据库中创建一个用于存储验证码信息的表。表结构可以包含以下字段：id:自增主键phon

用OCR技术，自动识别各种验证码，工具已开源May 25, 2023 am 10:07 AM

今天我在给大家分享一个OCR应用——ddddocr自动识别验证码。前面4个d是“带带弟弟”的首拼音。[/笑哭]。项目地址：https://github.com/sml2h3/ddddocr。使用的时候用pip命令直接安装即可pipinstallddddocr。OCR的核心技术包含两方面，一是目标检测模型检测图片中的文字，二是文字识别模型，将图片中的文字转成文本文字。第一类验证码最简单，它们没有复杂的背景图片，所以目标检测模型可以省略，直接将图片送入文字识别模型即可。识别代码如下：impor

如何使用PHP创建验证码图片？Sep 13, 2023 am 11:40 AM

如何使用PHP创建验证码图片？验证码（CAPTCHA）是一种常用的验证用户是否为人而不是机器的方法。在网站上，我们经常会看到验证码图片，要求用户输入图片上显示的随机字符或数字，以完成登录、注册、评论等操作。本文将介绍如何使用PHP创建验证码图片，并提供具体的代码示例。一、PHPGD库要创建验证码图片，我们需要使用PHP的GD库。GD库是一个用于处理图像的扩

如何使用 JavaScript 实现验证码功能？Oct 19, 2023 am 10:46 AM

如何使用JavaScript实现验证码功能？随着网络的发展，验证码已经成为了网站和应用程序中不可或缺的安全机制之一。验证码（VerificationCode）是一种用于判断用户是否为人类而不是机器的技术。通过验证码，网站和应用程序可以防止垃圾信息提交、恶意攻击、机器人爬虫等问题。本文将介绍如何使用JavaScript实现验证码功能，并提供具体的代码

react怎么实现手机验证码Jan 04, 2023 am 10:17 AM

react实现手机验证码的方法：1、下载antd button和input组件；2、通过“<Input className={`apiMobileInput`} disabled value={this.props.phoneNumber} />”获取客户的手机号；3、通过“await this.props.sendCode({...})”实现获取验证码即可。

See all articles