代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <!-- head -->
  4. <head>
  5. <title>图片登录验证</title>
  6. </head>
  7. <body>
  8. <input type="text" value="" placeholder="请输入验证码(区分大小写)"
  9. style="height:43px;position: relative; top:-15px; font-size:20px;"id ="text">
  10. <canvas id="canvas" width="100" height="43" onclick="dj()"
  11. style="border: 1px solid #ccc;
  12. border-radius: 5px;"></canvas>
  13. <button class="btn" onclick="sublim()">提交</button>
  14. </body>
  15. <script>
  16. var show_num = [];
  17. draw(show_num);
  18. function dj(){
  19. draw(show_num);
  20. }
  21. function sublim(){
  22. var val=document.getElementById("text").value;
  23. var num = show_num.join("");
  24. if(val==''){
  25. alert('请输入验证码!');
  26. }else if(val == num){
  27. alert('提交成功!');
  28. document.getElementById(".input-val").val('');
  29. draw(show_num);
  30.  
  31. }else{
  32. alert('验证码错误!\n你输入的是: '+val+"\n正确的是: "+num+'\n请重新输入!');
  33. document.getElementById("text").value='';
  34. draw(show_num);
  35. }
  36. }
  37. function draw(show_num) {
  38. var canvas_width=document.getElementById('canvas').clientWidth;
  39. var canvas_height=document.getElementById('canvas').clientHeight;
  40. var canvas = document.getElementById("canvas");//获取到canvas的对象,演员
  41. var context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台
  42. canvas.width = canvas_width;
  43. canvas.height = canvas_height;
  44. 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";
  45. var aCode = sCode.split(",");
  46. var aLength = aCode.length;//获取到数组的长度
  47.  
  48. for (var i = 0; i <= 3; i++) {
  49. var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
  50. var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
  51. var txt = aCode[j];//得到随机的一个内容
  52. show_num[i] = txt;
  53. var x = 10 + i * 20;//文字在canvas上的x坐标
  54. var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
  55. context.font = "bold 23px 微软雅黑";
  56.  
  57. context.translate(x, y);
  58. context.rotate(deg);
  59.  
  60. context.fillStyle = randomColor();
  61. context.fillText(txt, 0, 0);
  62.  
  63. context.rotate(-deg);
  64. context.translate(-x, -y);
  65. }
  66. for (var i = 0; i <= 5; i++) { //验证码上显示线条
  67. context.strokeStyle = randomColor();
  68. context.beginPath();
  69. context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
  70. context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
  71. context.stroke();
  72. }
  73. for (var i = 0; i <= 30; i++) { //验证码上显示小点
  74. context.strokeStyle = randomColor();
  75. context.beginPath();
  76. var x = Math.random() * canvas_width;
  77. var y = Math.random() * canvas_height;
  78. context.moveTo(x, y);
  79. context.lineTo(x + 1, y + 1);
  80. context.stroke();
  81. }
  82. }
  83. function randomColor() {//得到随机的颜色值
  84. var r = Math.floor(Math.random() * 256);
  85. var g = Math.floor(Math.random() * 256);
  86. var b = Math.floor(Math.random() * 256);
  87. return "rgb(" + r + "," + g + "," + b + ")";
  88. }
  89. </script>
  90. </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第13天

    今天选择数据库选了半天,Oracle,MySQL,SQL sever太难了,安装了又被图形界面,Linux虚拟机所困扰 明天尽量完成数据库安装 只能说是找视频资料和安装教程了.

  2. vue 快速入门 系列 —— Vue 实例的初始化过程

    其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...

  3. Java 线程学习笔记

    1.什么是线程 进程: 一个正在运行的程序就叫一个进程. 每个进程都有独立的内存空间. (进程是资源分派的基本单位) 线程: 一个进程中可以有很多线程.----> 常说的多线程 线程没有独立的内 ...

  4. python 小兵(8)闭包和装饰器

    闭包"是什么,以及,更重要的是,写"闭包"有什么用处. (个人理解) 1."闭包"是什么 首先给出闭包函数的必要条件: 闭包函数必须返回一个函数对象 ...

  5. 常见线程池 newFixedThreadPool 的简单使用

    package com.aaa.threaddemo; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurr ...

  6. 关于CALayer的疑惑

  7. go基础——变量与常量

    变量 package main import "fmt" /* 变量:variable 概念:一小块内存,用于存储数据,在程序运行过程中数值可以改变 特性:静态语言,强类型语言 * ...

  8. insert/delete/select/update 以及一些在select中常用的函数之类的

    crud程序员:create,read,update.delete 一.insert 细节说明: 1.插入的数据应与字段的数据类型相同.比如把'abc'添加到int类型会错误2.数据的长度应在列的规定 ...

  9. 反射(reflection),通过反射创建对象

    简单尝试: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public cl ...

  10. Eclipse、MyEclipse中代码提示框颜色

    Matching breackets highlight = 匹配括号突出显示 Completion proposal background = 提示框背景色 Completion proposal ...