基于js的算术验证
来源:互联网 发布:淘宝鸿星尔克优惠券 编辑:程序博客网 时间:2024/05/19 03:45
今天心血来潮搜索了下验证码的实现方式,仿照网上一个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 :
0 0
- 基于js的算术验证
- 基于JS的简单算术题式验证码的实现
- js的算术运算
- 算术验证码的实现
- 基于prototype.js验证框架(validation.js)的三个应用
- 基于JoinQuant的算术移动平均线回测
- [DELVE][web]基于angular js的Spring security验证
- 基于Ajax的数据验证——(1)CallBackObject.js
- 前端静态基于纯js的最后一步验证
- JSP算术验证码
- 基于广义表的算术表达式的实现
- 基于C++的采用单链表判断算术表达式的合理性
- KoaHub.JS基于Node.js开发的Koa 生成验证码插件代
- 基于栈运算的算术表达式(纠错判错)
- js 中的算术运算
- js 中的算术运算
- Js中算术函数math对象的用法:
- 将动网论坛验证码修改为算术运算提问的验证码
- java 程序用exe4j 打包成exe,怎样在没有jdk环境电脑上运行
- Android代码混淆
- 纯汇编语言打印字符.以及输出寄存器值至屏幕
- uboot之board.c
- JavaScript正则表达式——常用正则表达式整理
- 基于js的算术验证
- linux 5 clone to linux 6 libjava.so error
- C++ Handle(句柄) part1
- UVa 536 Tree Recobery 二叉树重建
- tomcat后端允许跨域访问的配置
- frame buffer驱动
- hive的查询注意事项以及优化总结
- 【Python】TCP Socket的粘包和分包的处理
- SQL语句的优先级(执行顺序)