小程序如何实现简单的计算器
发表于：2025-01-19 作者：千家信息网编辑
千家信息网最后更新 2025年01月19日，本篇内容介绍了"小程序如何实现简单的计算器"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果如下：#
千家信息网最后更新 2025年01月19日小程序如何实现简单的计算器
本篇内容介绍了"小程序如何实现简单的计算器"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
效果如下：
#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安全错误
数据库的锁怎样保障安全
oracle数据库热备
网络安全app龙头
网易的服务器推荐
删除公司数据库怎么判刑
如何连接sqlserver数据库
电视机服务器无法连接怎么办
数据库连接密码
小家电软件开发控制板
如何开软件开发工作室
用友从哪登陆sql数据库
学校网络安全投入
绝地求生蓝洞服务器飞机
数据库查询多条记录怎么保存
数据库表的数量
气象水文数据库管理与应用
运营培训哪里可以学习网络技术
腾讯云制作服务器镜像
网络技术三级书
FRP服务器怎么设置安全
数据库日志文件是干嘛的
新罗区鑫洪源网络技术工作室
JAVA版mc加入服务器
简述征信数据库的功能
保护系统和网络安全的安全技术
数据库编码格式怎么查
互联网 农业科技推广建议
网络安全和读书手抄报图片
期货软件开发定制平台搭建
工业互联网络技术
c 连接数据库删除数据
