前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript|制作网页随机验证码

JavaScript|制作网页随机验证码

作者头像
算法与编程之美
发布2020-06-17 15:29:39
3.8K0
发布2020-06-17 15:29:39
举报
文章被收录于专栏:算法与编程之美

问题描述

网站为了防止用户利用机器人自动注册、登陆和灌水,都会采用验证码技术。验证码技术其实就是把一串随机的数字生成图片,在图片中添加一些干扰元素,用户采用肉眼识别输入验证码,给后台提交数据完成验证。接下来就来讲解一下如何利用JavaScript制作网页随机验证码。

解决方案

1.n位数字字母验证码

1.1创建HTML页面

在HTML页面建立刷新按钮和验证码显示位置;

代码语言:javascript
复制

<!DOCTYPE html>

<html>

       <head>

              <meta  charset="UTF-8">

              <title>JavaScript制作网页随机验证码</title>

       </head>

       <body>

              <span  id="msg"></span>

              <input  type="button" value="刷新" />         

       </body>

</html>

效果:

图1.1 HTML效果图

在这里我们使用span标记我们的验证码列。它显示某行内的独特样式,在这里可以更好的显示产生的验证码。为了保证后面的程序的正常运行,一定不要省略id属性及修改取值。

1.2 新建JavaScript文件

新建JavaScript文件,命名为getCode.js,保存在与HTML文件相同的位置。在getCode.js文件中键入以下代码。

代码语言:javascript
复制

/*产生随机数的函数*/

function validateCode(n){

       /*验证码中可能包含的字符*/

       var  s ="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

       var  ret = "";//保存生成的验证码

       /*利用for循环,随机产生验证码中的每个字符*/

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

              var  index = Math.floor(Math.random()*62);//随机产生一个0~62位的数值

              //将随机产生的数值作为字符串的小标,在字符串s中取出该字符串,并入ret中

              ret  += s.charAt(index);

       }

       return  ret;//返回产生的验证码

}

/*显示随机数函数*/

function show(){

       //在id为msg的对象中显示验证码

       document.getElementById("msg").innerHTML  = validateCode(4)

}

window.onload = show; //页面加载时执行函数show

在getCode.js文件中,validateCode函数主要用于产生指定位数的随机数,并返回该随机数。函数show主要时调用validateCode函数,并在id为msg的对象中显示该随机数。

1.3 HTML中键入JavaScript文件

在HTML中键入JavaScript代码,具体代码如下:

代码语言:javascript
复制
<script src="js/getCode.js"  type="text/javascript"></script>

1.4 HTML中修改“刷新”按钮

在HTML中修改“刷新”按钮,具体代码如下:

代码语言:javascript
复制
<input type="button"  value="刷新" onclick="show()"/>

1.5 效果

图1.5随机生成验证码

结语

本次的例子使用了两种方法为对象增加事件,onclick事件和onload事件,从而实现n位数字字母验证码的输出问题。故而在JavaScript的学习中要熟练的掌握JavaScript事件,通过发生的事件来驱动函数执行,才能更好的将JavaScript与HTML相结合。

END

主 编 | 王楠岚

责 编 | 杨金月

where2go 团队

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-06-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档