问题描述 网站为了防止用户利用机器人自动注册、登陆和灌水,都会采用验证码技术。验证码技术其实就是把一串随机的数字生成图片,在图片中添加一些干扰元素,用户采用肉眼识别输入验证码,给后台提交数据完成验证。接下来就来讲解一下如何利用JavaScript制作网页随机验证码。 解决方案 1.n位数字字母验证码 1.1创建HTML页面 在HTML页面建立刷新按钮和验证码显示位置;
效果: 图1.1 HTML效果图 在这里我们使用span标记我们的验证码列。它显示某行内的独特样式,在这里可以更好的显示产生的验证码。为了保证后面的程序的正常运行,一定不要省略id属性及修改取值。 1.2 新建JavaScript文件 新建JavaScript文件,命名为getCode.js,保存在与HTML文件相同的位置。在getCode.js文件中键入以下代码。
在getCode.js文件中,validateCode函数主要用于产生指定位数的随机数,并返回该随机数。函数show主要时调用validateCode函数,并在id为msg的对象中显示该随机数。 1.3 HTML中键入JavaScript文件 在HTML中键入JavaScript代码,具体代码如下:
1.4 HTML中修改“刷新”按钮 在HTML中修改“刷新”按钮,具体代码如下:
1.5 效果 图1.5随机生成验证码 结语 本次的例子使用了两种方法为对象增加事件,onclick事件和onload事件,从而实现n位数字字母验证码的输出问题。故而在JavaScript的学习中要熟练的掌握JavaScript事件,通过发生的事件来驱动函数执行,才能更好的将JavaScript与HTML相结合。 主 编 | 王楠岚 责 编 | 杨金月 where2go 团队 |
|