JavaScript 验证码制作

HTML标签：

<canvas class="canvas_ver"></canvas>

JavaScript部分：

function verification(className){intIndex = 4;let canvas_ver = className;let canvas_ver1 = canvas_ver.getContext('2d');canvas_ver1.clearRect(1,1,300,149);canvas_ver1.strokeRect(1,1,300,149);canvas_ver1.textAlign= 'center'let canvas_text_color = ['red','blue','green','yellow','black'];let canvas_text_size = ['50pt','55pt','60pt','45pt'];let canvas_text_val = ['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','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','0','1','2','3','4','5','6','7','8','9'];let ret = Array();ret[intIndex]='';for (let i=0,j=50;i<intIndex;i++){let index1 = parseInt(Math.random()*(canvas_text_color.length-1));let index2 = parseInt(Math.random()*(canvas_text_size.length-1));let index3 = parseInt(Math.random()*(canvas_text_val.length-1));canvas_ver1.fillStyle = canvas_text_color[index1];canvas_ver1.font = canvas_text_size[index2]+' auto';canvas_ver1.fillText(canvas_text_val[index3],j += 50,100);for (let i=0;i<30;i++){canvas_ver1.fillStyle = canvas_text_color[index1];canvas_ver1.fillRect(Math.random()*300+1,Math.random()*150+1,5,5);}ret[i] = canvas_text_val[index3];}for (let i=0;i<intIndex;i++){ret[intIndex] += ret[i];}return ret[intIndex];}

JavaScript 验证码制作相关推荐

动态验证码制作（RandomCodeImage ）
在很多的网页中,他们的登录,注册等等地方都有验证码的存在,这下验证码都是动态生成的,有些验证码模糊不堪,有些干扰很多, 而验证码是用来干什么的呢?防止人为输入的不安全?错,验证码真正的用途在于,防止机 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章使用表格
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.1节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
PHP图片验证码制作（上）
最近正在学习php入门,现在刚入门,所以许多都不知道,就从最基础的学起,不会的上网查,然后把它记在这个法宝内,就如今天遇到随即函数rand();脑海中想到用它做点啥好呢,最后想起了验证码,数字验证码, ...
JavaScript网页制作--五秒后自动跳转页面
JavaScript网页制作–五秒后自动跳转页面通常在浏览一些网站时,会出现网页不存在的情况,网页不存在之后,有些网站会在5秒后自动跳转到一个新的网页,比如网站的首页.可以利用定时器和locatio ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
2022年10月15号之JavaScript验证码
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.验证码页面二.验证码逻辑 1.引入库总结前言 javaScript验证码一.生成验证码 <div&g ...
JavaScript网页制作--京东快递单号查询
JavaScript网页制作–京东快递单号查询上篇讲到了京东网页的一个可能不被大多数人熟知的小功能,S键自动获得焦点,相比于那个功能,这个快递单号查询的功能可能更明了一点,虽然我也觉得很鸡肋.在网页 ...

JavaScript 验证码制作

JavaScript 验证码制作相关推荐

最新文章

热门文章