html实现随机验证码
代码:
- <!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实现随机验证码的更多相关文章
- PYTHON 随机验证码生成
# 生成一个六位随机验证码 import random # random 生成随机数 temp = '' for i in range(6): num = random.randrange(0,6) ...
- Java生成随机验证码
package com.tg.snail.core.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
- js用正则表达式验证用户和密码的安全性,生成随机验证码
制作了一个表单,表单验证用户.密码.随机验证码 html页面
- php学习笔记:利用gd库生成图片,并实现随机验证码
说明:一些基本的代码我都进行了注释,这里实现的验证码位数.需要用的字符串都可以再设置.有我的注释,大家应该很容易能看得懂. 基本思路: 1.用mt_rand()随机生成数字确定需要获取的字符串,对字符 ...
- python_way,day4 内置函数(callable,chr,随机验证码,ord),装饰器
python_way,day4 1.内置函数 - 下 制作一个随机验证码 2.装饰器 1.内置函数 - 下 callable() #对象能否被调用 chr() #10进制数字对应的ascii码表中的内 ...
- iOS生成本地随机验证码
原文链接:http://www.cnblogs.com/jerehedu/p/4527707.html 效果图:
- python-Day5-深入正则表达式--冒泡排序-时间复杂度 --常用模块学习:自定义模块--random模块:随机验证码--time & datetime模块
正则表达式 语法: mport re #导入模块名 p = re.compile("^[0-9]") #生成要匹配的正则对象 , ^代表从开头匹配,[0 ...
- 【代码实现】PHP生成各种随机验证码
原文地址:http://www.phpthinking.com/archives/531 验证码在WEB应用中很重要,通经常使用来防止用户恶意提交表单,如恶意注冊和登录.论坛恶意灌水等.本文将通过实例 ...
- Python 生成随机验证码
Python生成随机验证码 Python生成随机验证码,需要使用PIL模块. 安装: 1 pip3 install pillow 基本使用 1. 创建图片 1 2 3 4 5 6 7 8 9 fro ...
- Python生成随机验证码
Python生成随机验证码,需要使用PIL模块. 安装: pip3 install pillow 基本使用 1.创建图片 from PIL import Image img = Image.new(m ...
随机推荐
- 学习Java第13天
今天选择数据库选了半天,Oracle,MySQL,SQL sever太难了,安装了又被图形界面,Linux虚拟机所困扰 明天尽量完成数据库安装 只能说是找视频资料和安装教程了.
- vue 快速入门 系列 —— Vue 实例的初始化过程
其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码, ...
- Java 线程学习笔记
1.什么是线程 进程: 一个正在运行的程序就叫一个进程. 每个进程都有独立的内存空间. (进程是资源分派的基本单位) 线程: 一个进程中可以有很多线程.----> 常说的多线程 线程没有独立的内 ...
- python 小兵(8)闭包和装饰器
闭包"是什么,以及,更重要的是,写"闭包"有什么用处. (个人理解) 1."闭包"是什么 首先给出闭包函数的必要条件: 闭包函数必须返回一个函数对象 ...
- 常见线程池 newFixedThreadPool 的简单使用
package com.aaa.threaddemo; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurr ...
- 关于CALayer的疑惑
- go基础——变量与常量
变量 package main import "fmt" /* 变量:variable 概念:一小块内存,用于存储数据,在程序运行过程中数值可以改变 特性:静态语言,强类型语言 * ...
- insert/delete/select/update 以及一些在select中常用的函数之类的
crud程序员:create,read,update.delete 一.insert 细节说明: 1.插入的数据应与字段的数据类型相同.比如把'abc'添加到int类型会错误2.数据的长度应在列的规定 ...
- 反射(reflection),通过反射创建对象
简单尝试: import java.lang.reflect.InvocationTargetException; import java.lang.reflect.Method; public cl ...
- Eclipse、MyEclipse中代码提示框颜色
Matching breackets highlight = 匹配括号突出显示 Completion proposal background = 提示框背景色 Completion proposal ...