基于JS的简单算术题式验证码的实现

最新推荐文章于 2023-01-07 11:49:36 发布
最新推荐文章于 2023-01-07 11:49:36 发布
阅读量6.7k 收藏
点赞数
分类专栏： JavaScript 文章标签： function jquery xhtml javascript input class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sadfishsc/article/details/7545972
版权

今天心血来潮搜索了下验证码的实现方式，仿照网上一个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
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
深度学习利用RCNN识别不定长计算题验证码（pytorch版，LSTM + CTCLoss）
码王吴彦祖的博客
04-19 2714
这里继上篇利用迁移学习resnet训练计算题后，对于如果有多位或者不定长位数的验证码问题难以解决了，所以采用RNN解决不定长序列的计算题验证码问题，这种解决方式同样适用于不定长4,6位验证码，接下来看详细步骤 准备数据集，我的数据集是这样的，数据集总数有将近上万张多张大概有三四张类型，所有的特征是[“零”, “一”, “二”, “三”, “四”, “五”, “六”, “七”, “八”, “九”, “加”, “减”, “乘”, “除”, “等”, “于”, “?”, “以”]，我这里还没有两位数及以上的计算题
php实现算术验证码功能
10-17
主要为大家详细介绍了php实现算术验证码功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于js的算术验证
luo4554的博客
08-02 299
今天心血来潮搜索了下验证码的实现方式，仿照网上一个6位字符型的验证码实现了一个100以内算术题式的验证码。代码如下，备用： [html] view plain copy >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text/htm
JavaScript练习题 | 写一个函数，输入任意两个数字的任意算术运算（简单的计算器小功能）
cherriko的博客
09-29 2004
正在看pink老师的视频学习JavaScript，目前进行到函数部分，其中一道课后练习题要求用函数编写一个简易计算器，请用户任意输入两个数字，任意选择一种运算方式，计算出最后结果并弹出提示框显示结果。 要求最终效果如下图: 配套资料里给的参考答案我没有看明白，网上搜索类似的题目也和上面展示的效果有所差异，所以只能自己动手了。 function doCalculate(symbol, num1, num2) { switch (parseInt(symbol)) { .
javaScript算术题(经典案例)
weixin_52923266的博客
01-07 655
javaScript算术题基本都会用到for循环,当然还会用到复杂点的双重for循环,外层for循环执行一次,内层for循环执行全部.
前端JavaScript关于算数的10道题
jh1906338271的博客
07-21 864
1实现九九乘法表 for(var i = 1;i<=9;i++){ for(var j = 1;j<=i;j++){ var desc = j + “" + i + “=” + ji + " “; document.write(desc); } document.write(””); } 2 求出1-1/2+1/3-1/4……1/100的结果 var j=0; for(var i=2;...
基于HEVC的CABAC二进制算术编码器的FPGA实现-论文
05-18
基于HEVC的CABAC二进制算术编码器的FPGA实现
基于c++实现的简易算术运算器
最新发布
03-25
一个简易的算术运算器。可实现多位数（整数和浮点数）的加、 减、乘、除（可考虑指数对数、三角函数、进制转换等）等基本的算术运算，可通过圆括号来改变运算优先级别，圆括号可多层嵌套。 功能：（1）程序运行后，...
基于ASP的中文和算术验证码分享.zip
07-19
基于ASP的中文和算术验证码分享.zip
Java实现中文算数验证码的实现示例(算数运算+-*/)
08-18
主要介绍了Java实现中文算数验证码的实现示例(算数运算+-*/)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
[Web]验证码 篇二——纯JavaScript实现算术验证码
weixin_44566432的博客
05-08 870
用JavaScript实现算术验证码，它的实现方式和随机字符串验证码的实现方式基本类似。 一起来通过代码看看到底哪些地方不太一样吧~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>算术验证码</title> <style type="text/css"> .code_a{ .
JavaScript Math（算数）随机生成数字（验证码）
猫老爷
02-24 1664
JavaScript Math（算数） 开发工具与关键技术：JavaScript Math算数 作者:听民谣的老猫 撰写时间：2019/2/6 17:15 数字验证码是我们接触的比较多的一种身份验证方法，有短信接收的验证码和网站刷新的验证码，是系统自动生成的4到6位数的随机数字。 我在mvc学习中接触的 Math（算数）对象就可以做到验证码的生成。 Math（算数）对象的作用是...
JS生成数字加减乘法验证码
weixin_34113237的博客
10-18 1107
给大家分享一个简单的js验证码生成代码 PS:该代码依赖Jquery1.4版本以上 传入元素 如productionVerificationCode(#\(("a")) 反回验证码的结果，#\)("a")元素写入验证码 //----[生成数字加减乘法验证码](传入写入元素，返回验证码计算结果) function productionVerificationCode(element) { ...
JS实现伪验证码的几种方式
passport_daizi的博客
09-12 6161
1： ? + ? =  ? 的方式
算术运算验证码实现
a372949805的博客
12-28 3427
package cn.com.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.util.HashMap; import java.util
Java实现中文算数验证码(算数运算+-*/)
hegaoye308444582的博客
09-14 1791
为了防止，页面向数据库暴力注册入力，用户登录暴力破解，所以加入验证码，验证码无法被软件获取上边的内容(加入算数计算，更加安全)，所以在现在技术，暂时安全。 先看效果图： 第一次加载比较慢，防止无法加载验证码显示，后台获取准备好的默认正在加载图片(静态图片)，后台图片获取好后，替代。 验证码效果图：                后台Java图片实现
实现简单算术表示式到抽象语法树的转换
05-24
将算术表达式转换为抽象语法树的一般方法是使用递归下降分析器。下面是一个简单的实现示例，可以将中缀表达式转换为抽象语法树。 假设我们要将以下算术表达式转换为抽象语法树： ``` 2 + 3 * 4 - 5 ``` 首先，我们需要定义语法规则。在这个例子中，我们只有加、减、乘三种运算符，因此我们可以定义以下语法规则： ``` expression -> term ( ( "+" | "-" ) term )* term -> factor ( ( "*" | "/" ) factor )* factor -> NUMBER | "(" expression ")" ``` 其中，expression 表示一个算术表达式，term 表示一个项，factor 表示一个因子。这些规则描述了表达式中运算符的优先级和结合性。 接下来，我们可以使用递归下降分析器来实现这些语法规则。具体实现如下： ```python class Node: def evaluate(self): pass class NumberNode(Node): def __init__(self, value): self.value = value def evaluate(self): return self.value class BinaryOperationNode(Node): def __init__(self, left, operator, right): self.left = left self.operator = operator self.right = right def evaluate(self): left_value = self.left.evaluate() right_value = self.right.evaluate() if self.operator == "+": return left_value + right_value elif self.operator == "-": return left_value - right_value elif self.operator == "*": return left_value * right_value elif self.operator == "/": return left_value / right_value class Parser: def __init__(self, tokens): self.tokens = tokens self.pos = 0 def parse(self): return self.expression() def expression(self): left = self.term() while self.pos < len(self.tokens): if self.tokens[self.pos][0] == "+": self.pos += 1 right = self.term() left = BinaryOperationNode(left, "+", right) elif self.tokens[self.pos][0] == "-": self.pos += 1 right = self.term() left = BinaryOperationNode(left, "-", right) else: break return left def term(self): left = self.factor() while self.pos < len(self.tokens): if self.tokens[self.pos][0] == "*": self.pos += 1 right = self.factor() left = BinaryOperationNode(left, "*", right) elif self.tokens[self.pos][0] == "/": self.pos += 1 right = self.factor() left = BinaryOperationNode(left, "/", right) else: break return left def factor(self): token = self.tokens[self.pos] if token[0] == "NUMBER": self.pos += 1 return NumberNode(token[1]) elif token[0] == "(": self.pos += 1 node = self.expression() if self.tokens[self.pos][0] != ")": raise Exception("Expected ')'") self.pos += 1 return node else: raise Exception("Expected number or '('") ``` 在这个实现中，我们定义了一个 Node 类作为所有节点的基类。NumberNode 表示一个数字节点，BinaryOperationNode 表示一个二元运算节点。Parser 类负责将 token 序列解析为抽象语法树。 我们首先定义了 expression、term 和 factor 三个方法，分别表示表达式、项和因子。在 expression 方法中，我们首先调用 term 方法获取左侧节点，然后使用 while 循环处理剩下的运算符，构建抽象语法树。term 和 factor 方法类似。 在 term 和 expression 方法中，我们使用了 while 循环来处理运算符。这是因为我们需要考虑运算符的优先级和结合性。例如，在表达式 "2 + 3 * 4" 中，乘法运算符具有更高的优先级，因此我们需要先处理乘法。 最后，我们可以使用以下代码来测试 Parser 类： ```python tokens = [ ("NUMBER", 2), ("+", None), ("NUMBER", 3), ("*", None), ("NUMBER", 4), ("-", None), ("NUMBER", 5), ] parser = Parser(tokens) tree = parser.parse() print(tree.evaluate()) # 输出: 9 ``` 这段代码首先定义了一个 token 序列，并将其传递给 Parser 类。然后，我们调用 parse 方法获取抽象语法树，并调用 evaluate 方法计算表达式的值。在这个例子中，输出应该为 9。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值