计算器实现（JS，VUE） 计算功能已完善

最新推荐文章于 2023-08-07 15:15:29 发布
最新推荐文章于 2023-08-07 15:15:29 发布
阅读量390 收藏 1
点赞数
文章标签： 计算器 JS VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITCSDN_/article/details/116209303
版权

前端实现计算器。。应该不难。

第一步：先建个项目：

项目结构如下：

注意：这个vue.js懂的都懂，官网下载或者一些编译器都自带的，这个不放代码了。
不多说，其他直接上代码。

第二步：html代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="calculator.css">
	</head>
	<body>
		<div id="app">
			<table id="cal">
				<tr>
					<td id="output" colspan="4">{{ output }}</td>
				</tr>
				<tr v-for="row in keys">
					<td v-if="key.value===0" :colspan="2" v-for="key in row" @click="keyClick(key)" :class="{'bg-yellow': key.type === 'op', 'bg-gray': key.type === 'num'}">
						{{ key.label }}</td>
					<td v-if="key.value!=0" v-for="key in row" @click="keyClick(key)" :class="{'bg-yellow': key.type === 'op', 'bg-gray': key.type === 'num'}">
						{{ key.label }}</td>
				</tr>
			</table>
		</div>

		<script src="vue.js"></script>
		<script src="calculator.js"></script>
	</body>
</html>

第三步：CSS代码：

.bg-yellow {
	background-color: #FF9C34 !important;
}

.bg-gray {
	background-color: #62645D !important;
}


#cal {
	margin: unset;
}

#cal #output {
	background-color: #222 !important;
	text-align: right;
	font-size: 3em;
	font-weight: bold;
	padding: 0px .2em;
	height: 2em;
}

#cal td {
	font-size: 1.5rem;
	font-family: Arial;
	width: 3em;
	height: 2.8em;
	background-color: #333;
	color: white;
	text-align: center;
	vertical-align: middle;
	border-radius: 20px;
}

第四步：JS代码：

new Vue({
	el: '#app',
	data: {
		output: 0,
		str: '',
		b: false,
		d: false,
		count: 0,
		expr: '',
		keys: [
			[{
					label: 'AC',
					value: 'reset',
					type: 'reset'
				},
				{
					label: '+/-',
					value: 'sign',
					type: 'negate'
				},
				{
					label: '%',
					value: '%',
					type: 'op'
				},
				{
					label: '÷',
					value: '/',
					type: 'op'
				}
			],
			[{
					label: '7',
					value: 7,
					type: 'num'
				},
				{
					label: '8',
					value: 8,
					type: 'num'
				},
				{
					label: '9',
					value: 9,
					type: 'num'
				},
				{
					label: '×',
					value: '*',
					type: 'op'
				}
			],
			[{
					label: '4',
					value: 4,
					type: 'num'
				},
				{
					label: '5',
					value: 5,
					type: 'num'
				},
				{
					label: '6',
					value: 6,
					type: 'num'
				},
				{
					label: '+',
					value: '+',
					type: 'op'
				}
			],
			[{
					label: '1',
					value: 1,
					type: 'num'
				},
				{
					label: '2',
					value: 2,
					type: 'num'
				},
				{
					label: '3',
					value: 3,
					type: 'num'
				},
				{
					label: '-',
					value: '-',
					type: 'op'
				}
			],
			[{
					label: '0',
					value: 0,
					type: 'num'
				},
				{
					label: '',
					value: "",
					type: 'num'
				},
				{
					label: '.',
					value: '.',
					type: 'num'
				},
				{
					label: '=',
					value: '=',
					type: 'exec'
				}
			],
		]
	},
	methods: {
		keyClick: function(key) {
			switch (key.type) {
				case 'num':
				case 'op':
					this.expr += key.value;
					s = this.changeNumber(key.value)
					this.expr = s
					this.output = this.expr;
					break;
				case 'exec':
					this.d = true
					this.output = eval(this.expr);
					this.str = this.output + ''
					break;
				case 'reset':
					this.expr = '';
					this.str = '';
					this.output = 0;
					break;
				case 'negate':
					this.str = "-1*(" + this.str + ")";
					this.output = eval(this.str);
					this.str = this.output + "";
					break;
			}
		},
		changeNumber: function(num) {
			if (this.d == true && typeof num == "number") {
				this.str = num + '';
				this.d = false;
				return this.str;
			} else {
				this.d = false;
				if (this.str.length == 0) {
					if (num == 0) {
						this.str = "0";
						return this.str;
					} else {
						this.str += num;
						return this.str;
					}
				} else {
					if (num == 0) {
						if (this.str == "0") {
							this.str = "";
							this.str += num;
							return this.str;
						} else {
							a = this.str.charAt(this.str.length - 2) //判断前一位是否是符号
							c = this.isSign(a)
							if (this.str.charAt(this.str.length - 1) == "0" && c) {
								if (a == '.') {
									this.str += num;
									return this.str;
								} else {
									this.str = this.str
									return this.str;
								}
							} else {
								if (this.str.charAt(this.str.length - 1) == ".") {
									this.str += num;
									return this.str;
								} else {
									this.str += num;
									return this.str;
								}
							}
						}
					} else if (num != 0 && typeof num == "number") {
						if (this.str == "0") {
							this.str = "";
							this.str += num;
							return this.str;
						} else {
							if (this.str.charAt(this.str.length - 1) == "0" && !this.havePoint(this.str)) {
								this.str = this.str.substring(0, this.str.length - 1) + num;
								return this.str;
							} else {
								this.str += num;
								return this.str;
							}
						}
					} else {
						this.str = this.str + ''
						s = this.str.charAt(this.str.length - 1);
						this.b = this.isSign(s)
						if (this.b && num != '.') {
							if (this.isS(num)) {
								temp = this.str.charAt(this.str.length - 1)
								if (temp == num) {
									this.str = this.str.substring(0, this.str.length - 1) + num;
									return this.str;
								} else {
									if (this.havePoint(this.str)) {
										this.str += num;
										return this.str;
									} else {
										this.str = this.str.substring(0, this.str.length - 1) + num;
										return this.str;
									}
								}
							} else {
								this.str = this.str.substring(0, this.str.length - 1) + num;
								return this.str;
							}
						} else {
							if (this.str.charAt(this.str.length - 1) == '.' && num == '.') {
								this.str = this.str;
								return this.str;
							} else {
								is = this.havePoint(this.str)
								if (is && num == '.') {
									this.str = this.str + '';
									return this.str;
								} else {
									this.str += num;
									return this.str;
								}
							}
						}
					}
				}
			}

		},
		havePoint: function(string) {
			n = string.length - 1;
			while (n > 0) {
				if (string.charAt(n) == '.') {
					return true;
				} else {
					s = string.charAt(n)
					if (this.isSign(s)) {
						return false
					} else {
						n--;
					}
				}
			}
		},
		isSign: function(s) {
			if (s == '+' || s == '-' || s == '*' || s == '/' || s == '%' || s == '.') {
				return true;
			} else {
				return false;
			}
		},
		isAB: function(strs, num) {
			if (strs.charAt(strs.length - 1) == num) {
				return true
			} else {
				return false
			}
		},
		isS: function(s) {
			if (s == '+' || s == '-' || s == '*' || s == '/' || s == '%') {
				return true;
			} else {
				return false;
			}
		},
	}
})

最终的结果：

搞定苹果计算器。

楠哥-------一心想为IT行业添砖加瓦，却总是面向cv编程的程序员。
  谢谢阅读，无误点赞，有误还望评论区指正。
楠哥学IT
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue.js实现简单的计算器功能
12-28
使用vue.js来编写一个简单的计算器，供大家参考，具体内容如下 效果如图所示：是一个十分简单的计算器，包含了加减乘除，不是用原生js写的，而是用vue.js写的 html： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> </head> <body> <input type=text v-model=n1 /> <select v-model=opt> + <option value=
vue+MathJax 显示数学公式
weixin_41643571的博客
08-27 916
1.在线cdn引入 1.1引入后行内公式显示小括号一定要加“\\ ”,注意斜杠后面有个空格 <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> //必须要加空格 否则显示出错 MathJax.Hub.Config({ tex2jax: {inlineMath:..
excel公式不自动计算_输入公式后，Excel却没有自动计算结果，你一定遇到了这些坑...
weixin_39900736的博客
11-18 3776
和Excel打交道的日子长了，你一定会发现：Excel有时候也很任性。这不，你的Excel公式没有错，却没有得到正确的结果！我想，你一定是遇到了这些坑。第一、公式没有错，修改数据后，没有重新计算。这时，你反复检查，发现公式没有错误，单元格格式也没有错误，似乎什么也没有错误。实在找不到原因，于是，你只好重新输入相同的公式。咦，公式竟然重新计算了！然而你哪能一个一个重新输入同样的公式呢？听说F9键可以...
实现表格自动计算
weixin_34410662的博客
03-03 562
先来看看实时操作动画演示： 每一行进行小计，数量 X 单价。而总计则是把表格中小计列所有行进行相加。 Html code: &lt;table id="Order"&gt; &lt;tr&gt; &lt;th&gt;费用名目&lt;/th&gt; &lt;th&gt;数量&lt;/th&gt; &lt;th&
Vue3.0学习 （4）-带入JS表达式进行动态计算
雨Winning
08-05 441
1、加减乘除计算 字符串之间的相加 <div v-text="message+'123'"> 2、三元表达式 " message ?'hello':'123' " 如果message<>’’ 则输出 hello 否则 输出 123 3、表达式而不是语句 if （1=2）是条件语句 不能写入到body中。 ...
Vue.js实现的计算器功能完整示例
10-18
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
vue.js实现的经典计算器/科学计算器功能示例
10-18
主要介绍了vue.js实现的经典计算器/科学计算器功能,具有基本四则运算计算器以及科学计算器的功能,可实现开方、乘方、三角函数以及公式运算等功能,需要的朋友可以参考下
Vue实现计算器计算效果
10-14
主要为大家详细介绍了Vue实现计算器计算效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue 表格中有列需要异步加载_解决vue 表格table列求和的问题
weixin_39747975的博客
12-19 436
最近在给朋友做一个项目，因为是B端，所以少不了表格。本身就用了element-ui，但是订单管理有个需求使用element-ui table组件实现不了，只能退而求其之用了原生的table，功能是几乎满足需求了，但是还有个小问题就是列求和没搞定，这可咋整啊。看了element-ui是有这么个功能，遂翻开源码看了下也没看出啥话头，心想算了，自己来实现，网上搜了下，偶然看到一位仁兄的写法，拿过来稍微修...
vue表格el-table取到某一列求和的值
weixin_45241364的博客
07-13 4704
解决vue表格el-table列求和的问题elementui
vue+element 前端解析excel并表格展示
ch_jia_jia的博客
02-26 9369
首先引入依赖模块： npm install xlsx --save 在需要解析excel的页面(vue文件)中引入依赖： import XLSX from 'xlsx' 页面部分： 使用elementUI组件完成文件上传： <!-- excel表格上传 --> <el-upload class="upload-demo" ...
MathJax 3 配置和上手渲染数学公式及在Vue中的使用
weixin_44041976的博客
07-18 5012
mathjax是一个用于latex、mathml和ascimath表示法的开源javascript显示引擎。mathjax的3.0版是对mathjax的彻底重写，实现了组件化，可以实现不同需求的定制，使用和配置与mathjax2版本有很大的不同，所以一定要注意版本。 最近在重构一个项目时，新增了一个需求支持latex数学公式渲染和编辑。在经过一番调研对比后，目前浏览器兼容性比较好的有两个，分别是KateX和MathJax。 性能对比截图 MathJax3 MathJax2.7 KaTex 从对比中.
Vue + MathLive 实现数学公式可编辑
君之虞
11-12 6196
Vue + MathLive 实现数学公式可编辑 效果图 一.环境 webpack cli4.0 html2canvas 插件 二.配置 在index.html 下 引用 mathlive js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
vue中实现element-ui 表格的单元格编辑功能和单元格之间的计算
热门推荐
一点一滴
03-29 1万+
<el-table :data="list" max-height="700" border style="width: 100%" @cell-click="tabClick" :row-class-name="tableRowClassName" > <el-table-column ...
Vue计算属性computed简介及简单用法（表格筛选）
q476584989的博客
11-28 9774
Vue计算属性computed简介及简单用法（表格筛选） 简介 在vue中一些数据经常依赖于别的数据，随之改变，且改变的逻辑也较复杂，这个时候就需要用到计算属性computed。 基本语法： ...
玩转Vue3：计算属性和监视属性深度解析
Cipher_Y的博客
08-07 283
1. Computed属性computed 是一个函数，它返回一个值，该值依赖于组件的数据。当依赖的数据发生改变时，computed 返回的值会自动更新。在 Vue.js 中，我们通常使用 computed 来封装复杂的逻辑或计算属性，使得我们能够更加方便地处理这些逻辑，并且保证其响应式的特性。2. Watch属性watch 是一个对象，它允许我们观察 Vue 实例的数据。当数据变化时，我们可以执行一些操作。在某些情况下，我们可能需要等待数据改变后执行某些操作，或者在数据改变时执行异步操作。
5.写vue遇到的问题及解决方法：为表格增加合计功能，计算指定列的总和。
qq_52999833的博客
04-16 1478
问题描述： 要求为表格添加合计功能，若后端传出的数字带逗号，需要去掉逗号再计算。 修改之前： 修改之后： 解决方法： 1.页面表格代码如下,为表格添加getTotal方法 <el-table show-summary :summary-method="getTotal" ref="filterTable" :data="dataTable" stripe> <el-table-column prop="eventname" label="事件名称" m
自定义Vue前端组件
qq_35680323的博客
04-21 430
前述：最近在学习element-ui，试着搭建自己的前端组件库（基于Vue），并发布到npm 一、搭建目录结构 1. 创建目录 lushuixi-ui 并打开目录 2. # npm init ，生成一个package.json文件 3. 搭建目录结构 packages 组件包目录 src 源码入口目录 scripts 脚本执行目录 README.md package.json 4. 在packages目录创建一个button组件 创建button目录 ...
Vue实现计算器（一看就懂）
Lycxiaobai的博客
02-23 5525
**这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路** 给个关注点个赞，后续我会分享更多我们学生党的作业问题 白嫖党们先看代码，我就先上上全代码，干！ <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>计算器</title> <!-- 引入Vue --> <script t
vue.js计算器功能代码
最新发布
11-02
这里提供的是Vue.js实现的计算器功能代码，具体如下： HTML部分代码： ``` <!DOCTYPE html> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <title>Vue.js Calculator ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值