html+js实现简单的网页计算器（支持四则运算带括号）

最新推荐文章于 2023-04-22 00:05:54 发布
最新推荐文章于 2023-04-22 00:05:54 发布
阅读量4.7k 收藏 12
点赞数 3
分类专栏： 后端开发 文章标签： node.js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Baling_haku/article/details/109685678
版权

网络上的html+js计算器大多是两个数字加一个运算符，不能实现输入长算式，这恰好是我学习中的一个任务，我就对长算式计算进行了js语言的简单实现。

页面部分十分简单，因为我的任务主要是后端开发：

<body>
        输入算式：<input type="text" name="string" id="string" autocomplete="off"/>
        <input type="button" value="计算" id="" onclick="calculate()"/>
        <p id="result"> </p>
</body>

就是这么个简陋的页面：
极简画风

其中，计算按钮触发js中calculate()函数，完成计算。

则js部分中，使用：

document.getElementById("string").value

读入字符串（输入的算式）。

使用：

document.getElementById("result").innerHTML

作为输出载体。

JS部分的编写，说实话还是与java有很大不同的，比如变量类型很随意，直接用var声明，而且一个数组里可以直接存多个类型的数据，方便处理。

处理算式需要多次使用正则表达式判断某个字符属于某个字符集，此项目使用的正则表达式如下：

const num=/[0-9]/;
const op=/[()/*\-+]/;
const spec=/[)/*+.]/;
const big=/[/*]/
const small=/[+\-]/
const fdm=/[(#]/;

下面开始处理数据，首先是将字符串处理为数字+运算符，存入队列中等待运算：
（比较啰嗦，但我实在想不到什么好方法了，大概也有一些疏漏，不过或许这个任务的目的就是借此熟悉一下各种语法吧）

		var st=document.getElementById("string").value;
        preIsOp=0;st="0+("+st+")+0";
        for(var i=0;i<st.length;i++){
   
            if(preIsOp==0&&spec.test(st.charAt(i))){
   document.getElementById("result").innerHTML="连续输入符号或两端为运算符"; return 0;}
            if(preIsOp==1&&st.
最低0.47元/天 解锁文章
Baling_haku
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于html+css+js实现简易计算器代码实例
11-20
使用html+css+js实现简易计算器， 效果图如下： html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>calculator</title> <link rel="stylesheet" type="text/cs
HTML5实现网页计算器
08-18
这是个用html5 + css3 + js写的网页计算器，支持括号运算，支持键盘输入、删除键删除输入，按键盘时计算器按键发亮
利用JavaScript在html页面做一个计算器
qq_33655643的博客
03-31 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、html组成二、html和css,js基础知识***1.html******2.css****3.javascript*代码一些细节未解决的bug 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、html组成 我们所要做的计算器可由两种方式构成 1.可以用table标签和tr，th，td标签构成，然后用css对他们的属性进行操作得到计算器. 2.可以用div容器实现，.
html实现计算器
zmk0820的博客
03-24 4523
html实现计算器
js实现计算器（包含加减乘除括号）
qq_28020627的博客
10-23 2286
// 求值的复杂表达式 const str = “3-7+352*(2+(4+3242-2-8+1)22)-22+(1/2.5+1)*3”; // 5216.2 // 用于打印正确的答案，好比较是否正确,式子要和上面str一样，只是没有双引号 const _str = 3-7+3*5*2*(2+(4+3*2*4*2-2-8+1)*2*2)-2*2+(1/2.5+1)*3; // 如果是减法或除法，第一个是被减数/被除数 function handleCalculation(numArr, num1, n
用HTML编写一个计算器
一直豚桑的博客
04-22 1275
喜欢的就点个赞吧~~~ 网页示例图：
JS实现的简单四则运算计算器功能示例
10-19
主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,需要的朋友可以参考下
带括号的四则运算表达式js实现
04-29
输入一个字符串形式的四则运算表达式，如"1.0+2.1*(3+4)" 直接谈出结果，输入在文件底部，自己写的。思路是先把中缀表达式转成后缀表达式，然后根据后缀表达式建立一个栈求出结果
Vue.js实现的计算器功能完整示例
10-18
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
我在CSDN的第一篇博客——js实现简单计算器
01-08
目前实现的功能：加减乘除四则运算，带括号的运算，小数点计算，黑暗/白天模式切换，响应式   UI设计 白天模式  暗黑模式  小窗口   在设计上参考了最近比较火的新拟态设计（并不是特别正规），其实现大致...
JS实现多功能计算器
01-22
5、技术分析：由于除了简单的四则运算，还需要进行括号匹配，以及优先级的运算。采用后缀表达式的形式进行处理，同时通过模拟栈的特点运用JS自带的数组进行处理。由于代码有详细的注释，所以直接上代码。 6、项目...
WEB网页版计算器（HTML、CSS、JavaScript实现）
热门推荐
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
做一个简易计算器
永无餍足的博客
04-14 3623
在学习js之后，结合html, css, js做出一个简易计算器
用html加减乘除法,用js来进行简单的加减乘除运算
weixin_39945475的博客
06-19 266
加、减、乘、除运算 function calculate(){ var num1 = parseFloat(document.getElementById("num1").value); var num2 = parseFloat(document.getElementById("num2").value); var val = document.getElementById("v...
JS新手入门案例：用函数实现四则运算
雷狐大叔
01-29 2147
JS用函数实现四则运算 新手练习案例教程，有详细注释信息。 // itleihu var n1 = parseFloat(prompt('请输入第一个数字：')), arith = prompt('请输入运算符号（+、-、*、/):'), n2 = parseFloat(prompt('请输入第二数字：')); //利用parseFloat()内置函数将接收到值转换成浮点数字型，否则最后结果会是字符串拼接 function getAri(x, y, z) { //分别接收第一个数字（
html计算算式,自动生成的四则运算算式
weixin_36337756的博客
06-28 825
一、需求分析需要自动生成四则运算试题的程序，取值范围在100以内，操作数是否含负数，剔除重复算式，显示在外部文件result.txt中。二、功能实现：·基本功能(1)自动生成10道100以内的2个操作数的四则运算算式(+ - * /)，要求运算结果也在100以内(2)题目数量可定制。(3)相关参数可控制。是否包含乘法和除法。操作数数值范围可控(如操作数 在100以内 还是1000以内)。操作...
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
Javascript 运用函数，prompt，switch.做一个简单的四则运算
weixin_46685628的博客
04-12 3144
<script type="text/javascript"> function per(){ var num=prompt("请输入第一个数"); var num2=prompt("请输入第二个数"); var por=prompt("请输入一个运算符"); var result; num=parseFIoat(num); num=parseFIoat(num2); switch(p...
javaScript之加减乘除(支持多参数)
m0_63393739的博客
07-23 569
javascript浮点数运算精度丢失
带括号的四则运算C语言有注释,C语言简单计算器,实现四则运算,可带括号
最新发布
05-28
好的，这是一个简单的带括号的四则运算计算器的C语言代码，已经加上了注释，希望对你有帮助： ```c #include <stdio.h> #include <stdlib.h> #include <ctype.h> #define MAXLEN 100 // 定义最大长度 // 定义一个结构体表示栈 typedef struct { int top; // 栈顶指针 int data[MAXLEN]; // 存放数据的数组 } Stack; // 初始化栈 void initStack(Stack *s) { s->top = -1; // 初始时，栈顶指针为-1 } // 判断栈是否为空 int isEmpty(Stack *s) { return s->top == -1; } // 判断栈是否已满 int isFull(Stack *s) { return s->top == MAXLEN - 1; } // 入栈操作 void push(Stack *s, int x) { if (isFull(s)) { printf("Stack is full!\n"); exit(1); } s->data[++s->top] = x; // 先将栈顶指针加1，然后再赋值 } // 出栈操作 int pop(Stack *s) { if (isEmpty(s)) { printf("Stack is empty!\n"); exit(1); } return s->data[s->top--]; // 先返回栈顶元素，然后再将栈顶指针减1 } // 获取栈顶元素 int peek(Stack *s) { if (isEmpty(s)) { printf("Stack is empty!\n"); exit(1); } return s->data[s->top]; } // 判断是否为运算符 int isOperator(char c) { return c == '+' || c == '-' || c == '*' || c == '/'; } // 判断操作符的优先级 int priority(char c) { if (c == '*' || c == '/') { return 2; } else if (c == '+' || c == '-') { return 1; } else { return 0; } } // 中缀表达式转后缀表达式 void infixToPostfix(char *infix, char *postfix) { Stack s; initStack(&s); int i = 0, j = 0; while (infix[i]) { if (isdigit(infix[i])) { // 如果是数字，直接输出到后缀表达式中 postfix[j++] = infix[i++]; } else if (infix[i] == '(') { // 如果是左括号，入栈 push(&s, infix[i++]); } else if (infix[i] == ')') { // 如果是右括号，将栈中的元素输出到后缀表达式中，直到遇到左括号 while (!isEmpty(&s) && peek(&s) != '(') { postfix[j++] = pop(&s); } if (!isEmpty(&s) && peek(&s) == '(') { pop(&s); // 弹出左括号 } i++; } else if (isOperator(infix[i])) { // 如果是运算符 while (!isEmpty(&s) && priority(infix[i]) <= priority(peek(&s))) { postfix[j++] = pop(&s); } push(&s, infix[i++]); } else { printf("Invalid character!\n"); exit(1); } } while (!isEmpty(&s)) { // 将栈中的元素输出到后缀表达式中 postfix[j++] = pop(&s); } postfix[j] = '\0'; // 后缀表达式以'\0'结尾 } // 计算后缀表达式的值 int calculate(char *postfix) { Stack s; initStack(&s); int i = 0; while (postfix[i]) { if (isdigit(postfix[i])) { // 如果是数字，将其转换为整数，然后入栈 int num = 0; while (isdigit(postfix[i])) { num = num * 10 + postfix[i] - '0'; i++; } push(&s, num); } else if (isOperator(postfix[i])) { // 如果是运算符，弹出栈顶的两个元素，进行运算，然后将结果入栈 int b = pop(&s); int a = pop(&s); switch (postfix[i]) { case '+': push(&s, a + b); break; case '-': push(&s, a - b); break; case '*': push(&s, a * b); break; case '/': push(&s, a / b); break; } i++; } else { printf("Invalid character!\n"); exit(1); } } return pop(&s); // 最终栈中的元素就是计算结果 } int main() { char infix[MAXLEN], postfix[MAXLEN]; printf("Please enter an infix expression (with parentheses): "); fgets(infix, MAXLEN, stdin); // 从标准输入中读取中缀表达式 infixToPostfix(infix, postfix); // 将中缀表达式转换为后缀表达式 printf("The postfix expression is: %s\n", postfix); int result = calculate(postfix); // 计算后缀表达式的值 printf("The result is: %d\n", result); return 0; } ``` 这个计算器可以进行带括号的四则运算，例如输入"(3+4)*5-6/2"，输出结果为"374+5*62/-"和"23"。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值