代码：

<!DOCTYPE html>

<html>

<!-- head -->

<head>

  <title>图片登录验证</title>

</head>

<body>

     <input type="text" value="" placeholder="请输入验证码（区分大小写）"

     style="height:43px;position: relative; top:-15px; font-size:20px;"id ="text">

     <canvas id="canvas" width="100" height="43" onclick="dj()"

      style="border: 1px solid #ccc;

        border-radius: 5px;"></canvas>

     <button class="btn" onclick="sublim()">提交</button>

    </body>

<script>

 var show_num = [];

 draw(show_num);

function dj(){

 draw(show_num);

 }

function sublim(){

var val=document.getElementById("text").value;

            var num = show_num.join("");

            if(val==''){

                alert('请输入验证码！');

            }else if(val == num){

                alert('提交成功！');

                document.getElementById(".input-val").val('');

                draw(show_num);

            }else{

                alert('验证码错误！\n你输入的是:  '+val+"\n正确的是:  "+num+'\n请重新输入！');

                document.getElementById("text").value='';

                draw(show_num);

            }

          }

function draw(show_num) {

        var canvas_width=document.getElementById('canvas').clientWidth;

        var canvas_height=document.getElementById('canvas').clientHeight;

        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员

        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台

        canvas.width = canvas_width;

        canvas.height = canvas_height;

        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";

        var aCode = sCode.split(",");

        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {

            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值

            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度

            var txt = aCode[j];//得到随机的一个内容

            show_num[i] = txt;

            var x = 10 + i * 20;//文字在canvas上的x坐标

            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标

            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);

            context.rotate(deg);

            context.fillStyle = randomColor();

            context.fillText(txt, 0, 0);

            context.rotate(-deg);

            context.translate(-x, -y);

        }

        for (var i = 0; i <= 5; i++) { //验证码上显示线条

            context.strokeStyle = randomColor();

            context.beginPath();

            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);

            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);

            context.stroke();

        }

        for (var i = 0; i <= 30; i++) { //验证码上显示小点

            context.strokeStyle = randomColor();

            context.beginPath();

            var x = Math.random() * canvas_width;

            var y = Math.random() * canvas_height;

            context.moveTo(x, y);

            context.lineTo(x + 1, y + 1);

            context.stroke();

        }

    }

function randomColor() {//得到随机的颜色值

        var r = Math.floor(Math.random() * 256);

        var g = Math.floor(Math.random() * 256);

        var b = Math.floor(Math.random() * 256);

        return "rgb(" + r + "," + g + "," + b + ")";

    }

</script>

</html>

大佬的地址：https://blog.csdn.net/qq_42463851/article/details/90755734

html实现随机验证码的更多相关文章

  1. PYTHON 随机验证码生成

    # 生成一个六位随机验证码 import random # random 生成随机数 temp = '' for i in range(6): num = random.randrange(0,6) ...

  2. Java生成随机验证码

    package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  3. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  4. php学习笔记：利用gd库生成图片，并实现随机验证码

    说明:一些基本的代码我都进行了注释,这里实现的验证码位数.需要用的字符串都可以再设置.有我的注释,大家应该很容易能看得懂. 基本思路: 1.用mt_rand()随机生成数字确定需要获取的字符串,对字符 ...

  5. python_way,day4 内置函数（callable，chr，随机验证码，ord），装饰器

    python_way,day4 1.内置函数 - 下 制作一个随机验证码 2.装饰器 1.内置函数 - 下 callable() #对象能否被调用 chr() #10进制数字对应的ascii码表中的内 ...

  6. iOS生成本地随机验证码

    原文链接:http://www.cnblogs.com/jerehedu/p/4527707.html 效果图:

  7. python-Day5-深入正则表达式--冒泡排序-时间复杂度 --常用模块学习:自定义模块--random模块:随机验证码--time & datetime模块

    正则表达式   语法:             mport re #导入模块名 p = re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹配,[0 ...

  8. 【代码实现】PHP生成各种随机验证码

    原文地址:http://www.phpthinking.com/archives/531 验证码在WEB应用中很重要,通经常使用来防止用户恶意提交表单,如恶意注冊和登录.论坛恶意灌水等.本文将通过实例 ...

  9. Python 生成随机验证码

    Python生成随机验证码  Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fro ...

  10. Python生成随机验证码

    Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 基本使用 1.创建图片 from PIL import Image img = Image.new(m ...

随机推荐

  1. java-包概述

    1 package face_package; 2 3 import face_packagedemo.DemoA; 4 5 /* 包(package) 6 * 1,对类文件进行分类管理. 7 * 2 ...

  2. 使用Xamarin开发移动应用示例——数独游戏（二）创建游戏界面

    在本系列第一部分,我们创建了程序框架,现在我们创建游戏的界面,项目代码可以从Github下载:https://github.com/zhenl/ZL.Shudu .代码随项目进度更新. 首先在View ...

  3. python02day

    回顾 1.编译型和解释型 编译型:一次性编译成二进制,再执行 执行效率高,但不能跨平台,开发效率低 代表语言:C 解释型:逐行解释成二进制,再执行 可以跨平台,开发效率高,但执行效率低 代表语言:py ...

  4. ERNIE代码解析

    原创作者 |疯狂的Max ERNIE代码解读 考虑到ERNIE使用BRET作为基础模型,为了让没有基础的NLPer也能够理解代码,笔者将先为大家简略的解读BERT模型的结构,完整代码可以参见[1]. ...

  5. 学Go语言能找到实习吗，年前聊聊Go和Java

    前言 快过年了,来公司的人越来越少,估计明天都没什么人了,白泽也要收拾收拾回老家过年了.今天就随便写写零碎的事,所以行文当中难免思路跳跃,请大家一笑了之. 每次冷不丁收到公司给发的礼品袋,心头总是莫名 ...

  6. window-server 服务器解决远程连接

    mstsc 连接远程服务器,出现黑屏的情况: 解决方案: 运行 -> 输入gpedit.msc,进入组策略 -> 计算机配置 -> 管理模板 -> Windows组件 -> ...

  7. 布客&#183;ApacheCN 编程/大数据/数据科学/人工智能学习资源 2020.2

    特约赞助商 公告 我们愿意普及区块链技术,但前提是互利互惠.我们有大量技术类学习资源,也有大量的人需要这些资源.如果能借助区块链技术存储和分发,我们就能将它们普及给我们的受众. 我们正在招募项目负责人 ...

  8. 【h5游戏开发】egret引擎p2物理引擎 - 小球碰撞地面搞笑的物理现象

    重力的方向和地面的问题 p2中默认的方向是从上到下,如果重力默认是正数的话,物体放到世界中是会从上面往下面飘的 p2中plane地面默认的方向是y轴的方向,而在p2中y轴的方向默认是从上往下 首先来看 ...

  9. Net6 DI源码分析Part1 ServiceCollection、ServiceDescriptor、ServiceLifetime、IServiceProvider

    ServiceCollection.ServiceDescriptor.ServiceLifetime.IServiceProvider Microsoft.Extensions.Dependency ...

  10. Java协变、逆变、类型擦除

    协变.逆变 定义 Java中String类型是继承自Object的,姑且记做String ≦ Object,表示String是Object的子类型,String的对象可以赋给Object的对象.而Ob ...