开发一个鸿蒙版仿苹果计算器教程.附代码
众所周知鸿蒙 js 框架是非常轻量级的 mvvm 模式。通过使用和 vue2 相似的属性劫持技术实现了响应式系统。
学习鸿蒙很长时间了，想写一个 demo 进行练练手，就选择开发这个仿苹果计算器程序。
先看效果图：
话不多说，上代码
hml： {{output}}
{{$item}}
{{$item}}
{{$item}}
{{$item}}
css：
.container { flex-direction: column; background-color: #010101; height:100%; width:100%;}.header{ height:36%; width:100%; align-items: flex-end; padding:2px 20px 2px 10px;}.keyboard{ height:64%; width:100%; padding:2px 10px; flex-wrap: wrap;}.outputtext,.outputtextsmall{ width:100%; height:100px; color:#ffffff; text-align: end;}.outputtext{ font-size:80px;}.outputtextsmall{ font-size:58px;}.keys,.zerokeys,.operatorkeys-top,.operatorkeys-right{ width:74px; height:74px; justify-content: center; align-items: center; border-radius:74px; margin:10px 5px;}.keys-nubmer,.zerokeys{ background-color:#333333;}.zerokeys{ width:158px;}.operatorkeys-top{ background-color: #a4a4a4;}.operatorkeys-right{ background-color: #f79f31;}.keys:active,.zerokeys:active{ background-color: #737373;}.keys text,.zerokeys text,.operatorkeys-right text{ font-size:42px; color: #ffffff;}.operatorkeys-top text{ font-size:36px; color: #010101;}.operatorkeys-top:active{ background-color: #d9d9d9;}.operatorkeys-right:active{ background-color: #f5c891;} js：
import {math} from ../../common/js/utils.js;export default { data: { output:0, outputclassname:outputtext, cache:[],//记录输入内容 keyarr:[ac,+/-,%,÷,7,8,9,×,4,5,6,-,1,2,3,+,0,.,=], reoper:,//记录点击的运算符 restr1:,//记录第一次输入内容 restr2:,//记录点击运算符后的内容 bool:false//防止第二次输入内容时内容清空 }, oninit(){ this.$watch(output,watchoutput) }, onclickoper(item){ if(item == ac){ this.clearcomput(); } else if(item == + || item == - || item == × || item == ÷){ this.reoper = item; this.restr1 = this.output; if(this.cache.length > 0){ this.startcompute(); } this.cache.push(this.restr1); } else if(item == +/-){ this.output = -+this.output; } else if(item == %){ this.output = math.accdiv(this.output,100); } else if(item == =){ this.restr2 = this.output; this.cache.push(this.restr2); this.startcompute(); } }, onclicknubmer(item){ if(this.cache.length > 0 && !this.bool){ this.output = 0; this.bool = true; } if(this.output == 0 && item != .){ this.output = item; } else if(item == .){ if(this.output.indexof(.) == -1){ if(this.output == 0){ this.output = 0. } else { this.output += item; } } } else { if(this.output.length 7 && nval.length 0) { var cm = math.pow(10, c); if (r1 > r2) { arg1 = number(arg1.tostring().replace(., )); arg2 = number(arg2.tostring().replace(., )) * cm; } else { arg1 = number(arg1.tostring().replace(., )) * cm; arg2 = number(arg2.tostring().replace(., )); } } else { arg1 = number(arg1.tostring().replace(., )); arg2 = number(arg2.tostring().replace(., )); } return (arg1 + arg2) / m; } //js精准减法函数 accsub(arg1, arg2) { let r1, r2, m, n; try { r1 = arg1.tostring().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.tostring().split('.')[1].length; } catch (e) { r2 = 0; } m = math.pow(10, math.max(r1, r2)); //动态控制精度长度 n = r1 >= r2 ? r1 : r2; return (arg1 * m - arg2 * m) / m; } //js精准乘法函数 accmul(arg1, arg2) { var m = 0, s1 = arg1.tostring(), s2 = arg2.tostring(); try { m += s1.split(.)[1].length; } catch (e) { } try { m += s2.split(.)[1].length; } catch (e) { } return number(s1.replace(., )) * number(s2.replace(., )) / math.pow(10, m); }}export var math = new mathcalss();
为了解决浮点数计算失准问题，我使用一些解决计算失准的函数可供大家参考。
三星S9上市消息确定，三星S9配置曝光，这次我们做的会更薄！
Bosch Sensortec推出智能传感器全自动门锁解决方案，助力门锁行业创新
小米手表首次系统更新，各种体验大升级
未来人工智能的发展方向将如何
3M机器人自动化打磨取得成功，需要考虑哪些要素？
开发一个鸿蒙版仿苹果计算器教程.附代码
如何构建一个简单的对讲电路
消息称苹果iPad发售时间推迟到3月26日
LoRa模块的应用场景
200元以内口碑爆棚的网红电动牙刷，性价比高体验好
Kanzi for Android: 为用户全方位打造最佳车内体验
MarketsandMarkets发布了全球智慧城市发展的最新报告
康宁和住友商事推出光学雷电接口缆线
Protel99 SE高频PCB设计的研究
从古老造船业看3D打印 开发应用场景成发展关键所在
用于多参数室内环境监测系统中的PM1.0传感器 - GPSM
总投资超130亿！两大锂电项目签约
关于土壤PH速测仪的简单介绍
MIPI/LVDS转MIPI/LVDS电平转换器LT89101L介绍
2018年Q3国内智能手机市场报告公布 排在首位的依旧是苹果
学习鸿蒙很长时间了，想写一个 demo 进行练练手，就选择开发这个仿苹果计算器程序。
先看效果图：
话不多说，上代码
hml： {{output}}
{{$item}}
{{$item}}
{{$item}}
{{$item}}
css：
.container { flex-direction: column; background-color: #010101; height:100%; width:100%;}.header{ height:36%; width:100%; align-items: flex-end; padding:2px 20px 2px 10px;}.keyboard{ height:64%; width:100%; padding:2px 10px; flex-wrap: wrap;}.outputtext,.outputtextsmall{ width:100%; height:100px; color:#ffffff; text-align: end;}.outputtext{ font-size:80px;}.outputtextsmall{ font-size:58px;}.keys,.zerokeys,.operatorkeys-top,.operatorkeys-right{ width:74px; height:74px; justify-content: center; align-items: center; border-radius:74px; margin:10px 5px;}.keys-nubmer,.zerokeys{ background-color:#333333;}.zerokeys{ width:158px;}.operatorkeys-top{ background-color: #a4a4a4;}.operatorkeys-right{ background-color: #f79f31;}.keys:active,.zerokeys:active{ background-color: #737373;}.keys text,.zerokeys text,.operatorkeys-right text{ font-size:42px; color: #ffffff;}.operatorkeys-top text{ font-size:36px; color: #010101;}.operatorkeys-top:active{ background-color: #d9d9d9;}.operatorkeys-right:active{ background-color: #f5c891;} js：
import {math} from ../../common/js/utils.js;export default { data: { output:0, outputclassname:outputtext, cache:[],//记录输入内容 keyarr:[ac,+/-,%,÷,7,8,9,×,4,5,6,-,1,2,3,+,0,.,=], reoper:,//记录点击的运算符 restr1:,//记录第一次输入内容 restr2:,//记录点击运算符后的内容 bool:false//防止第二次输入内容时内容清空 }, oninit(){ this.$watch(output,watchoutput) }, onclickoper(item){ if(item == ac){ this.clearcomput(); } else if(item == + || item == - || item == × || item == ÷){ this.reoper = item; this.restr1 = this.output; if(this.cache.length > 0){ this.startcompute(); } this.cache.push(this.restr1); } else if(item == +/-){ this.output = -+this.output; } else if(item == %){ this.output = math.accdiv(this.output,100); } else if(item == =){ this.restr2 = this.output; this.cache.push(this.restr2); this.startcompute(); } }, onclicknubmer(item){ if(this.cache.length > 0 && !this.bool){ this.output = 0; this.bool = true; } if(this.output == 0 && item != .){ this.output = item; } else if(item == .){ if(this.output.indexof(.) == -1){ if(this.output == 0){ this.output = 0. } else { this.output += item; } } } else { if(this.output.length 7 && nval.length 0) { var cm = math.pow(10, c); if (r1 > r2) { arg1 = number(arg1.tostring().replace(., )); arg2 = number(arg2.tostring().replace(., )) * cm; } else { arg1 = number(arg1.tostring().replace(., )) * cm; arg2 = number(arg2.tostring().replace(., )); } } else { arg1 = number(arg1.tostring().replace(., )); arg2 = number(arg2.tostring().replace(., )); } return (arg1 + arg2) / m; } //js精准减法函数 accsub(arg1, arg2) { let r1, r2, m, n; try { r1 = arg1.tostring().split('.')[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.tostring().split('.')[1].length; } catch (e) { r2 = 0; } m = math.pow(10, math.max(r1, r2)); //动态控制精度长度 n = r1 >= r2 ? r1 : r2; return (arg1 * m - arg2 * m) / m; } //js精准乘法函数 accmul(arg1, arg2) { var m = 0, s1 = arg1.tostring(), s2 = arg2.tostring(); try { m += s1.split(.)[1].length; } catch (e) { } try { m += s2.split(.)[1].length; } catch (e) { } return number(s1.replace(., )) * number(s2.replace(., )) / math.pow(10, m); }}export var math = new mathcalss();
为了解决浮点数计算失准问题，我使用一些解决计算失准的函数可供大家参考。
三星S9上市消息确定，三星S9配置曝光，这次我们做的会更薄！
Bosch Sensortec推出智能传感器全自动门锁解决方案，助力门锁行业创新
小米手表首次系统更新，各种体验大升级
未来人工智能的发展方向将如何
3M机器人自动化打磨取得成功，需要考虑哪些要素？
开发一个鸿蒙版仿苹果计算器教程.附代码
如何构建一个简单的对讲电路
消息称苹果iPad发售时间推迟到3月26日
LoRa模块的应用场景
200元以内口碑爆棚的网红电动牙刷，性价比高体验好
Kanzi for Android: 为用户全方位打造最佳车内体验
MarketsandMarkets发布了全球智慧城市发展的最新报告
康宁和住友商事推出光学雷电接口缆线
Protel99 SE高频PCB设计的研究
从古老造船业看3D打印 开发应用场景成发展关键所在
用于多参数室内环境监测系统中的PM1.0传感器 - GPSM
总投资超130亿！两大锂电项目签约
关于土壤PH速测仪的简单介绍
MIPI/LVDS转MIPI/LVDS电平转换器LT89101L介绍
2018年Q3国内智能手机市场报告公布 排在首位的依旧是苹果