基于JS的简单算术题式验证码的实现
来源:互联网 发布:建筑施工仿真软件 编辑:程序博客网 时间:2024/05/29 16:55
今天心血来潮搜索了下验证码的实现方式,仿照网上一个6位字符型的验证码实现了一个100以内算术题式的验证码。代码如下,备用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>验证码</title><style type="text/css">.nocode {width: 100px;height: 25px;}.code {background: url(code_bg.jpg) repeat;color: #ff0000;font-family: Tahoma, Geneva, sans-serif;font-style: italic;font-weight: bold;text-align: center;width: 100px;height: 25px;cursor: pointer;}.input {width: 100px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function() {var code = 9999;$(".input").focus(function(){$(this).attr("value", "");var num1 = Math.floor(Math.random() * 100);var num2 = Math.floor(Math.random() * 100);code = num1 + num2;$("#code").html(num1 + "+" + num2 + "=?");if ($("#code").hasClass("nocode")) {$("#code").removeClass("nocode");$("#code").addClass("code");}});$("#check").click(function(){if ($(".input").attr("value") == code && code != 9999) {alert("Pass!");} else {alert("Wrong code!");}});});</script></head><body><input type="text" class="input" /><div id="code" class="nocode"></div><button id="check">验证</button></body></html>效果如下:
上述实现主要还是基于jQuery,其实也可以不用。JavaScript 1.6新添加了一系列函数,其中就包含document.querySelector和document.querySelectorAll。这两个函数的作用与jQuery的元素选择器如出一辙,即通过传入类似于 ".class" 、 "#id" 等这样的字符串选择符来获取元素;区别在于 querySelector 函数获取的是符合选择符的第一个DOM元素,而 querySelectorAll 函数获取的是符合选择符的DOM元素数组。获取到元素之后,就可以通过相应的事件(如onfocus、onclick等)来操作数据了。
另外,验证码的元素除了用<div>以外,还可能使用<input type="text">,只不过需要对其做一定的处理:如去掉输入框的边框(border: none),设置为只读(readonly)。
最后附上验证码的背景图片 code_bg.jpg :
- 基于JS的简单算术题式验证码的实现
- 基于js的算术验证
- 算术验证码的实现
- 基于springmvc实现后台实现简单的验证码
- JS的实现简单的表单验证
- 简单的js验证码
- 简单的js验证码
- 最简单的登录验证(js实现)
- 用js实现登录的简单验证
- 使用js实现简单的注册验证
- node.js在服务端实现简单的验证码--captchapng
- 基于js的简单队列实现
- js实现的验证码
- 简单的验证码实现
- 简单的验证码实现
- 简单的实现验证码
- 验证码的简单实现
- 简单验证码的实现
- [我一直想看到的文章 好好保存赏析]微软、英特尔和摩根的比较
- 人们对食品安全的要求在降低
- Uploadify的用法
- SAAJ客户端访问WebService
- sacfa
- 基于JS的简单算术题式验证码的实现
- android adb 命令总结
- DirectX9 SDK Samples(11) CompiledEffect Sample
- 十二周任务(二)
- 从零开始学习Sencha Touch MVC应用之十二
- QT中的signal/slot的事件
- ARM汇编指令汇总
- 在DLL中创建对话框
- 门户网站 JSP 使用的标记