鸿蒙JS实战：利用动态组件开发基础计算器
作者：工具松鼠时间：2026-10-31 11:48:17浏览：584
本文介绍在鸿蒙JS环境下开发计算器的实战案例。通过动态绑定button组件构建键盘，利用text组件显示表达式，实现加减乘除及清除、重置功能。文章解析了HML结构、CSS样式及JS核心逻辑，重点讨论了单一计算与连续计算的实现思路，并验证了NaN判断等开发细节。
场景描述：
本案例通过动态设置button组件来构建计算器键盘，并使用text组件显示计算表达式。功能上支持加、减、乘、除运算，具备逐个移除字符和重置计算的功能。
接下来进入正文，按照惯例，将从以下几个方面展开说明：
1. 实现思路
2. 代码解析
3. 实现效果
3，总结
一、实现思路
计算器键盘布局原计划使用grid组件，但因部分默认属性难以控制，暂作保留，待后续组件完善后再行优化。目前grid更适用于均衡布局场景。系统通过监听计算符号的添加并执行相应的判断逻辑，计算结果则依据已添加的计算类型进行运算。当前版本仅支持一级计算，后续将迭代支持连续计算功能。
二、代码解析
子组件实现：
1. HML文件
界面使用了四个for循环来实现键盘布局效果。经思考，实际上一个循环配合动态换行即可实现，受限于时间，后续再进行优化（尽管感觉计算器开发看似简单，实际编码仍需投入一定时间）。
<div class="container">
<text class="input-content">{{inputcontent}}</text>
<div class="menu-content">
<div class="caluater" for="{{ caluater }}" >
<button class="content" onclick="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="menu-content">
<div class="caluater" for="{{ caluater1 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="menu-content">
<div class="caluater" for="{{ caluater2 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="list2-content">
<div class="list3-content">
<div class="list2-content">
<div class="caluater" for="{{ caluater3 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
<div class="list2-content">
<div class="caluater" for="{{ caluater4 }}">
<button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
</div>
</div>
</div>
<button class="equals" onclick="calculatorResult">=</button>
</div>
</div>
2. CSS文件
样式设计较为简洁，主要侧重于控制键盘按钮及表达式文本的颜色与字体大小。
.container {
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
}
.input-content{
background-color: #00ffffff;
text-align: right;
font-size: 25px;
padding: 10px;
font-weight: bold;
}
.menu-content{
width: 100%;
background-color: brown;
allow-scale: true;
}
.caluater {
flex-direction: row;
width: 100%;
height: 70px;
background-color: #00ffffff;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
}
.content{
font-size: 30px;
font-weight: bold;
radius: 10px;
width: 100%;
height: 100%;
text-color: #007EFF;
background-color: #A8CCFB;
}
.content2{
font-size: 30px;
font-weight: bold;
radius: 10px;
width: 100%;
height: 100%;
text-color: #000000;
background-color: #dddcdc;
}
.list2-content{
flex-direction: row;
justify-content: center;
align-items: center;
background-color: brown;
}
.list3-content{
flex-direction: column;
margin-bottom: 10px;
}
.equals{
width: 30%;
height: 150px;
font-size: 30px;
font-weight: bold;
radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
3. JS文件
JavaScript部分主要实现业务逻辑，具体计算判断逻辑请参见代码详情。
import prompt from '@system.prompt';
export default {
data: {
title: "",
inputcontent: "",
number1: "",
number2: "",
type: "",
caluater: [
{
'id': "C",
},
{
'id': "÷",
},
{
'id': "×",
},
{
'id': "←",
}
],
caluater1:[
{
'id': "7",
},
{
'id': "8",
},
{
'id': "9",
},
{
'id': "+",
}
],
caluater2:[
{
'id': "4",
},
{
'id': "5",
},
{
'id': "6",
},
{
'id': "-",
}
],
caluater3:[
{
'id': "1",
},
{
'id': "2",
},
{
'id': "3",
}
],
caluater4:[
{
'id': "%",
},
{
'id': "0",
},
{
'id': ".",
}
]
},
onInit() {
},
calculatorClick(result){
this.inputcontent = this.inputcontent+"";
let str = this.inputcontent
.substring(this.inputcontent.length-1, this.inputcontent.length);
switch(result) {
case "←":
if(this.inputcontent.length > 0) {
let str = this.inputcontent
.substring(0, this.inputcontent.length - 1);
this.inputcontent = str;
}
break;
case "C":
this.inputcontent = "";
break;
case "+":
this.calcula(str,result,"+");
break;
case "-":
this.calcula(str,result,"-");
break;
case "×":
this.calcula(str,result,"×");
break;
case "÷":
this.calcula(str,result,"÷");
break;
case ".":
if(this.inputcontent.length > 0 && str != ".") {
this.inputcontent += result;
}
break;
default:
this.inputcontent += result;
break;
}
},
calcula(str,result,cla){
if(this.inputcontent.length > 0 && str != "+" && str != "-" && str != "×" && str != "÷") {
this.type = cla;
this.inputcontent += result;
} else {
this.calculatorResult();
}
},
calculatorResult(){// 计算结果
var temp = this.inputcontent.split(this.type);
console.log("this.inputcontent = "+this.inputcontent)
let str = this.inputcontent
.substring(this.inputcontent.length-1, this.inputcontent.length);
console.log("this.type = "+this.type)
if (this.type == "+") { // 加法计算
if(temp.length > 1) {
console.log("temp = "+temp)
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
console.log("num1 = "+num1)
console.log("num2 = "+num2)
console.log("str = "+str)
if(str != "+") {
this.inputcontent = num1 + num2;
this.type = "";
}
}
} else if(this.type == "-") { // 减法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "-") {
this.inputcontent = num1 - num2;
this.type = "";
}
}
} else if(this.type == "×") { // 乘法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "×") {
this.inputcontent = num1 * num2;
this.type = "";
}
}
} else if(this.type == "÷") { // 除法计算
if(temp.length > 1) {
var num1 = parseFloat(temp[0]);
var num2 = parseFloat(temp[1]);
if(str != "÷") {
this.inputcontent = num1 / num2;
this.type = "";
}
}
}
}
}
为满足当前的单一计算需求，代码中进行了大量判断处理。后续在实现连续计算时逻辑会有所调整，但目前正常计算功能无误，期待后续版本的更新。
三、实现效果
四、总结
开发计算器的核心难点在于连续计算，这需要引入计算优先级逻辑。后续计划通过遍历表达式来判断并处理内部计算顺序。
计算器界面可通过常用组件实现，具体实现方式可根据实际需求自行定义。
在开发过程中验证了NaN（非数字）的判断机制，发现许多常规方式对此无效，该判断专门针对Number类型进行。
至此，关于鸿蒙JS实战之计算器功能开发的文章介绍完毕。如需了解更多鸿蒙JS计算器开发相关内容，请搜索本站往期文章或继续阅读后续文章，感谢大家的支持！
作者最新文章
JS表单序列化出现中文乱码怎么解决
2026-11-05 17:21:05
JS代码在线格式化工具推荐：无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45