小程序如何实现简单的计算器
发表于：2025-11-09 作者：千家信息网编辑
千家信息网最后更新 2025年11月09日，本篇内容介绍了"小程序如何实现简单的计算器"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下：#
千家信息网最后更新 2025年11月09日小程序如何实现简单的计算器
本篇内容介绍了"小程序如何实现简单的计算器"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
效果如下：
#app.json
{ "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "智能计算器" }, "tabBar": { "color": "#ff69b4", "selectedColor": "#0000ff", "backgroundColor": "#ffff00", "list": [ { "pagePath": "pages/index/index", "text": "计 算 机" }, { "pagePath": "pages/logs/logs", "text": "日志" }, { "pagePath": "pages/logs/logs", "text": "回家" } ] }}#app.wsxx
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}#index.wxml
{{displayValue}}
#index.js
Page({ data: { value: null, // 上次计算后的结果，null表示没有上次计算的结果 displayValue: "0", // 显示数值 operator: null, // 上次计算符号，null表示没有未完成的计算 waitingForOperand: false // 前一按键是否为计算符号 }, onLoad: function (options) { this.calculatorOperations = { "key-divide": (prevValue, nextValue) => prevValue / nextValue, "key-multiply": (prevValue, nextValue) => prevValue * nextValue, "key-add": (prevValue, nextValue) => prevValue + nextValue, "key-subtract": (prevValue, nextValue) => prevValue - nextValue, "key-equals": (prevValue, nextValue) => nextValue } }, /* AC操作，一下回到解放前 */ clearAll() { this.setData({ value: null, displayValue: "0", operator: null, waitingForOperand: false }) }, /* 仅清空当前显示的输入值 */ clearDisplay() { this.setData({ displayValue: "0" }) }, onTapFunction: function (event) { const key = event.target.dataset.key; switch (key) { case "key-clear": if (this.data.displayValue !== "0") { this.clearDisplay(); } else { this.clearAll(); } break; case "key-sign": var newValue = parseFloat(this.data.displayValue) * -1 this.setData({ displayValue: String(newValue) }) break; case "key-percent": const fixedDigits = this.data.displayValue.replace(/^-?d*.?/, "") var newValue = parseFloat(this.data.displayValue) / 100 this.setData({ displayValue: String(newValue.toFixed(fixedDigits.length + 2)) }); break; default: break; } }, onTapOperator: function (event) { const nextOperator = event.target.dataset.key; const inputValue = parseFloat(this.data.displayValue); if (this.data.value == null) { this.setData({ value: inputValue }); } else if (this.data.operator) { const currentValue = this.data.value || 0; const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue); this.setData({ value: newValue, displayValue: String(newValue) }); } this.setData({ waitingForOperand: true, operator: nextOperator }); }, onTapDigit: function (event) { const key = event.target.dataset.key; // 根据data-key标记按键 if (key == "key-dot") { // 按下点号 if (!(/./).test(this.data.displayValue)) { this.setData({ displayValue: this.data.displayValue + ".", waitingForOperand: false }) } } else { // 按下数字键 const digit = key[key.length - 1]; if (this.data.waitingForOperand) { this.setData({ displayValue: String(digit), waitingForOperand: false }) } else { this.setData({ displayValue: this.data.displayValue === "0" ? String(digit) : this.data.displayValue + digit }) } } }})#index.wxss
page { height:100%;}.calculator { width: 100%; height: 100vh; border:solid 1px; background: rgb(238, 5, 5); position: relative; box-shadow: 0px 0px 20px 0px rgb(211, 41, 41); display: flex; flex-direction: column; box-sizing: border-box;}.calculator-display { /*显示器背景颜色*/ background: #2c2a2c; flex: 1;}/*TODO:解决文本垂直居中问题,显示器数字颜色*/.calculator-display-text { padding: 0 30px; font-size: 3em; color: rgb(245, 245, 248); text-align: right;}.calculator-keypad { display: flex;}.calculator .function-keys { display: flex; color:rgb(245, 13, 13);}.calculator .digit-keys { background: #0808f7; display: flex; flex-direction: row; flex-wrap: wrap-reverse;}.calculator-key-hover { /*按钮按下以后的颜色*/ box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);}.calculator-key {background-color:aqua; display: block; width: 25vw; height: 25vw; line-height: 25vw; border-top: 1px solid rgb(6, 245, 78); border-right: 1px solid rgb(19, 241, 12); text-align: center; box-sizing: border-box;}.calculator .function-keys .calculator-key { font-size: 2em;}.calculator .digit-keys .calculator-key { font-size: 3em;}.calculator .digit-keys .key-0 { width: 50vw; text-align: left; padding-left: 9vw;}.calculator .digit-keys .key-dot { padding-top: 1em; font-size: 0.75em;}.calculator .operator-keys .calculator-key { color: rgb(248, 165, 10); border-right: 0; font-size: 3em;}.calculator .function-keys { background: linear-gradient(to bottom, rgb(6, 6, 240) 0%, rgb(52, 5, 240) 100%);}.calculator .operator-keys { background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);}.input-keys { width: 100%;}.operator-keys { width: 100%;}"小程序如何实现简单的计算器"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
计算器
颜色
程序
内容
按键
数字
显示器
更多
知识
符号
结果
实用
学有所成
接下来
困境
实际
情况
按钮
效果
数值
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
北京天沛时代网络技术
软件开发的工作人员上班时间
plsql中连接数据库如何填写
更新数据库脚本
数据库异常无法读取
网络安全隐患找谁上报
还有几天网络技术
临沂市鼎力网络技术
hive 中建表样例数据库
易方web服务器管理系统
网络安全计划高中英语作文
服务器数据库损坏
无法接触到激活服务器
我的世界1.16刷铁轨机服务器
高级网络技术实践
sql数据库在哪里查询表内容
蓝帕网络技术有限公司
数据库应用技术实验报告
二调数据库是哪一年开始执行的
服务器开放式托架
浏览器f12中的数据库
使命召唤选服务器
博兴瓷砖软件开发
网络安全科技馆来客
数据库安全网关谁家好
网络安全法全文两万字
服务器音频文件
网络技术类技能考试
国家网络安全竞赛脚本
厦门网络安全培训机构
