强力推荐微信小程序之简易计算器，很适合小白程序员

前几日有人问我有没有计算器小程序案例，今天我们说下小程序计算器，然后就分享这样的小案例。希望对大家有所帮助

不多说了，直接上图！

快去拿个小板凳，坐等更多更新

注意：如若需要请联系微信dukaijie134

wxml

1. <viewclass="content">
2. <viewclass="layout-top">
3. <viewclass="screen">
4. {{screenData}}
5. </view>
6. </view>
7. <viewclass="layout-bottom">
8. <viewclass="btnGroup">
9. <viewclass="item orange"bindtap="clickBtn"id="{{idc}}">С</view>
10. <viewclass="item orange"bindtap="clickBtn"id="{{idb}}">←</view>
11. <!--<view class="item orange" bindtap="clickBtn" id="{{idt}}">＋/－</view>-->
12. <viewclass="item orange iconBtn"bindtap="history">
13. <icontype="{{iconType}}"color="{{iconColor}}"class="icon"size="25"/>
14. </view>
15. <viewclass="item orange"bindtap="clickBtn"id="{{idadd}}">＋</view>
16. </view>
17. <viewclass="btnGroup">
18. <viewclass="item blue"bindtap="clickBtn"id="{{id9}}">9</view>
19. <viewclass="item blue"bindtap="clickBtn"id="{{id8}}">8</view>
20. <viewclass="item blue"bindtap="clickBtn"id="{{id7}}">7</view>
21. <viewclass="item orange"bindtap="clickBtn"id="{{idj}}">－</view>
22. </view>
23. <viewclass="btnGroup">
24. <viewclass="item blue"bindtap="clickBtn"id="{{id6}}">6</view>
25. <viewclass="item blue"bindtap="clickBtn"id="{{id5}}">5</view>
26. <viewclass="item blue"bindtap="clickBtn"id="{{id4}}">4</view>
27. <viewclass="item orange"bindtap="clickBtn"id="{{idx}}">×</view>
28. </view>
29. <viewclass="btnGroup">
30. <viewclass="item blue"bindtap="clickBtn"id="{{id3}}">3</view>
31. <viewclass="item blue"bindtap="clickBtn"id="{{id2}}">2</view>
32. <viewclass="item blue"bindtap="clickBtn"id="{{id1}}">1</view>
33. <viewclass="item orange"bindtap="clickBtn"id="{{iddiv}}">÷</view>
34. </view>
35. <viewclass="btnGroup">
36. <viewclass="item blue zero"bindtap="clickBtn"id="{{id0}}">0</view>
37. <viewclass="item blue"bindtap="clickBtn"id="{{idd}}">.</view>
38. <viewclass="item orange"bindtap="clickBtn"id="{{ide}}">＝</view>
39. </view>
40. </view>
41. </view>

js

1. Page({
2. data:{
3. idb:"back",
4. idc:"clear",
5. idt:"toggle",
6. idadd:"＋",
7. id9:"9",
8. id8:"8",
9. id7:"7",
10. idj:"－",
11. id6:"6",
12. id5:"5",
13. id4:"4",
14. idx:"×",
15. id3:"3",
16. id2:"2",
17. id1:"1",
18. iddiv:"÷",
19. id0:"0",
20. idd:".",
21. ide:"＝",
22. screenData:"0",
23. operaSymbo:{"＋":"+","－":"-","×":"*","÷":"/",".":"."},
24. lastIsOperaSymbo:false,
25. iconType:'waiting_circle',
26. iconColor:'white',
27. arr:[],
28. logs:[]
29. },
30. onLoad:function(options){
31. // 页面初始化 options为页面跳转所带来的参数
32. },
33. onReady:function(){
34. // 页面渲染完成
35. },
36. onShow:function(){
37. // 页面显示
38. },
39. onHide:function(){
40. // 页面隐藏
41. },
42. onUnload:function(){
43. // 页面关闭
44. },
45. clickBtn:function(event){
46. varid=event.target.id;
47. if(id==this.data.idb){//退格←
48. vardata=this.data.screenData;
49. if(data=="0"){
50. return;
51. }
52. data=data.substring(0,data.length-1);
53. if(data==""||data=="－"){
54. data=0;
55. }
56. this.setData({"screenData":data});
57. this.data.arr.pop();
58. }elseif(id==this.data.idc){//清屏C
59. this.setData({"screenData":"0"});
60. this.data.arr.length=0;
61. }elseif(id==this.data.idt){//正负号+/-
62. vardata=this.data.screenData;
63. if(data=="0"){
64. return;
65. }
66. varfirstWord=data.charAt(0);
67. if(data=="－"){
68. data=data.substr(1);
69. this.data.arr.shift();
70. }else{
71. data="－"+data;
72. this.data.arr.unshift("－");
73. }
74. this.setData({"screenData":data});
75. }elseif(id==this.data.ide){//等于＝
76. vardata=this.data.screenData;
77. if(data=="0"){
78. return;
79. }
80. //eval是js中window的一个方法，而微信页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件
81. //var result = eval(newData);
82. varlastWord=data.charAt(data.length);
83. if(isNaN(lastWord)){
84. return;
85. }
86. varnum="";
87. varlastOperator="";
88. vararr=this.data.arr;
89. varoptarr=[];
90. for(variinarr){
91. if(isNaN(arr[i])==false||arr[i]==this.data.idd||arr[i]==this.data.idt){
92. num+=arr[i];
93. }else{
94. lastOperator=arr[i];
95. optarr.push(num);
96. optarr.push(arr[i]);
97. num="";
98. }
99. }
100. optarr.push(Number(num));
101. varresult=Number(optarr[0])*1.0;
102. console.log(result);
103. for(vari=1;i<optarr.length;i++){
104. if(isNaN(optarr[i])){
105. if(optarr[1]==this.data.idadd){
106. result+=Number(optarr[i+1]);
107. }elseif(optarr[1]==this.data.idj){
108. result-=Number(optarr[i+1]);
109. }elseif(optarr[1]==this.data.idx){
110. result*=Number(optarr[i+1]);
111. }elseif(optarr[1]==this.data.iddiv){
112. result/=Number(optarr[i+1]);
113. }
114. }
115. }
116. //存储历史记录
117. this.data.logs.push(data+'='+result);
118. wx.setStorageSync("calclogs",this.data.logs);
119. this.data.arr.length=0;
120. this.data.arr.push(result);
121. this.setData({"screenData":result+""});
122. }else{
123. if(this.data.operaSymbo[id]){//如果是符号+-*/
124. if(this.data.lastIsOperaSymbo||this.data.screenData=="0"){
125. return;
126. }
127. }
128. varsd=this.data.screenData;
129. vardata;
130. if(sd==0){
131. data=id;
132. }else{
133. data=sd+id;
134. }
135. this.setData({"screenData":data});
136. this.data.arr.push(id);
137. if(this.data.operaSymbo[id]){
138. this.setData({"lastIsOperaSymbo":true});
139. }else{
140. this.setData({"lastIsOperaSymbo":false});
141. }
142. }
143. },
144. history:function(){
145. wx.navigateTo({
146. url:'../history/history'
147. })
148. }
149. })

css

1. .content{
2. height:100%;
3. display:flex;
4. flex-direction:column;
5. align-items:center;
6. background-color:#ccc;
7. font-family:"Microsoft YaHei";
8. overflow-x:hidden;
9. }
10. .layout-top{
11. width:100%;
12. margin-bottom:30rpx;
13. }
14. .layout-bottom{
15. width:100%;
16. }
17. .screen{
18. text-align:right;
19. width:100%;
20. line-height:260rpx;
21. padding:010rpx;
22. font-weight:bold;
23. font-size:60px;
24. box-sizing:border-box;
25. border-top:1pxsolid#fff;
26. }
27. .btnGroup{
28. display:flex;
29. flex-direction:row;
30. flex:1;
31. width:100%;
32. height:5rem;
33. background-color:#fff;
34. }
35. .item{
36. width:25%;
37. display:flex;
38. align-items:center;
39. flex-direction:column;
40. justify-content:center;
41. margin-top:1px;
42. margin-right:1px;
43. }
44. .item:active{
45. background-color:#ff0000;
46. }
47. .zero{
48. width:50%;
49. }
50. .orange{
51. color:#fef4e9;
52. background:#f78d1d;
53. font-weight:bold;
54. }
55. .blue{
56. color:#d9eef7;
57. background-color:#0095cd;
58. }
59. .iconBtn{
60. display:flex;
61. }
62. .icon{
63. display:flex;
64. align-items:center;
65. width:100%;
66. justify-content:center;
67. }