原生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邮箱登陆入口在哪里

7569

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

107

显示更多

Related knowledge

谷歌浏览器不显示验证码图片怎么办?chrome浏览器不显示验证码? Mar 13, 2024 pm 08:55 PM

谷歌浏览器不显示验证码图片怎么办？在使用谷歌浏览器登录网页有时候需要验证码验证。部分用户在使用图片验证码的时候发现谷歌浏览器无法正常显示图片的内容。这应该怎么办呢？下面小编带来谷歌浏览器验证码不显示处理方法介绍，希望对大家有所帮助！　　方法介绍　　1、进入软件，点击右上角的“更多”按钮，选择下方选项列表中的“设置”进入。　　2、进入新界面后，点击左侧的“隐私设置和安全性”选项。　　3、接着点击右侧中的“网站设置&rdquo

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

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

虚拟号码可以接收验证码吗 Jan 02, 2024 am 10:22 AM

虚拟号码可以接收验证码，只要注册时填写的手机号码符合规定，并且能够正常接通手机号，就可以收到短信验证码。不过，使用虚拟手机号需要注意，部分网站不支持虚拟手机号注册，因此需要选择正规的虚拟手机号服务商。

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

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

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

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

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

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

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

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

手机收到各种平台验证码怎么回事 Sep 21, 2023 pm 03:31 PM

手机收到各种平台验证码可能是因为个人信息被盗用、手机号码被滥用或者手机号码被误填或误用。详细介绍：1、个人信息被盗用，黑客或者不法分子可能通过各种渠道获取到你的个人信息，然后利用这些信息在各种平台上注册账号；2、手机号码被滥用，有些不法分子会通过各种手段获取到大量的手机号码，然后利用这些手机号码进行各种欺诈活动；3、手机号码被误填或误用等等。

See all articles

原生js实现验证码的生成方法（完整代码）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题