一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家：專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 微信小程序實現簡單計算器

微信小程序實現簡單計算器

2022-02-28 16:11m0_45972156 js教程

這篇文章主要為大家詳細介紹了微信小程序寫簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序寫的簡單計算器，供大家參考，具體內容如下

jisaunqi.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
// pages/jisuanqi/jisuanqi.js
Page({
 
  /**
   * 頁面的初始數據
   */
  data: {
    result:"0",
    string:"",
    cal:"",
    num1:"",
    num2:""
  },
  btSubmit:function(e){
    console.log(e);
    var num1 = this.data.num1;
    var cal = this.data.cal;
    var num2 = this.data.num2;
    var char= e.target.id;
    var string ;
    if((char>="0"&&char<="9"||char=='.')&&cal==""){
      num1=num1+char;
      this.setData({
        num1:num1,
      })
    }
    else if((char>="0"&&char<="9"||char=='.')&&cal!=""){
      num2=num2+char;
      this.setData({
        num2:num2,
      })
    }
    else {
      cal=char;
      this.setData({
        cal:cal,
      })
    }
    this.setData({
     string:num1+cal+num2
    })
  },
  clean:function(e){
    this.setData({
      string:"",
      num1:"",
      num2:"",
      cal:""
    })
  },
  calculate:function(e){
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    var cal = this.data.cal;
    var result;
    switch(cal){
      case '+':result=num1*1+num2*1;break;
      case '-':result=num1*1-num2*1;break;
      case '*':result=(num1*1)*(num2*1);break;
      case '/':result=(num1*1)/(num2*1);break;
    }
    num1=result;
    cal="";
    num2="";
    this.setData({
      result:result,
      num1:num1,
      cal:cal,
      num2:num2
    })
  },
  reverse:function(e){
    var cal = this.data.cal;
    var num1 = this.data.num1;
    var num2 = this.data.num2;
    if(cal==""){num1="-";}
    else if(cal!=""){num2="-"}
    this.setData({
      num1:num1,
      num2:num2
    })
  },
  lololo:function(e){
    console.log(123)
  },
  confirm:function(e){
    console.log(555);
    console.log(e)
  },
  event:function(e){
    wx.navigateTo({
      url: '/pages/event/event',
    })
  },
  bindinput:function(e){
    console.log(1)
  },
  jisuanqi:function(e){
    var n1=e.detail.value.num1;
    var n2=e.detail.value.num2;
    var result=n1*1+n2*1;
    console.log(n1);
    console.log(n2);
    console.log(result);
    this.setData({
      result:result
    })
  },
  tiaozhuan:function(e){
    wx.navigateTo({
      url: '/pages/9x9form/9x9form',
    })
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
 
  },
 
  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
 
  },
 
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

jisuanqi.json

?
1
2
3
4
{
  "usingComponents": {},
  "navigationBarTitleText": "計算器"
}

jisuanqi.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<view class="container">
  <view class="view1">{{string}}</view>
  <view class="view2">{{result}}</view>
  <view class="button-group">
    <button class="button">歷史</button>
    <button class="button" bindtap="clean">C</button>
    <button class="button"></button>
    <button class="button" id="/" bindtap="btSubmit">/</button>
  </view>
  <view class="button-group">
    <button class="button" id="7" bindtap="btSubmit">7</button>
    <button class="button" id="8" bindtap="btSubmit">8</button>
    <button class="button" id="9" bindtap="btSubmit">9</button>
    <button class="button" id="*" bindtap="btSubmit">*</button>
  </view>
  <view class="button-group">
    <button class="button" id="4" bindtap="btSubmit">4</button>
    <button class="button" id="5" bindtap="btSubmit">5</button>
    <button class="button" id="6" bindtap="btSubmit">6</button>
    <button class="button" id="-" bindtap="btSubmit">-</button>
  </view>
  <view class="button-group">
    <button class="button" id="1" bindtap="btSubmit">1</button>
    <button class="button" id="2" bindtap="btSubmit">2</button>
    <button class="button" id="3" bindtap="btSubmit">3</button>
    <button class="button" id="+" bindtap="btSubmit">+</button>
  </view>
  <view class="button-group">
    <button class="button" bindtap="reverse">-(符號減)</button>
    <button class="button" id="0" bindtap="btSubmit">0</button>
    <button class="button" id="." bindtap="btSubmit">.</button>
    <button class="button" bindtap="calculate">=</button>
  </view>
</view>
<navigator url="/pages/event/event">跳轉到event</navigator>//

jisuanqi.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.button{
  width: 160rpx;
  height: 100rpx;
  margin-left: 10rpx;
  padding-left: 10rpx;
  margin-top: 10rpx;
  text-align: center;
  line-height: 100rpx;
  padding: 5px;
  border-radius: 5px;
}
.button-group{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* align-content: flex-end; */
}
.view1{
  height: 100rpx;
  background-color: #e4e4e4;
  line-height: 100rpx;
  font-size: 20px;
}
.view2{
  height: 100rpx;
  margin-top: 5px;
  background-color: #e4e4e4;
  line-height: 100rpx;
  font-size: 20px;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。

原文鏈接：https://blog.csdn.net/m0_45972156/article/details/115559212

延伸 · 閱讀

精彩推薦
  • js教程如何利用JavaScript實現二叉搜索樹

    如何利用JavaScript實現二叉搜索樹

    這篇文章主要給大家介紹了關于如何利用JavaScript實現二叉搜索樹的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學...

    瘋狂的技術宅7802022-02-22
  • js教程在JavaScript中查找字符串中最長單詞的三種方法(推薦)

    在JavaScript中查找字符串中最長單詞的三種方法(推薦)

    這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋...

    Hunter網絡安全7352022-01-04
  • js教程關于uniApp editor微信滑動問題

    關于uniApp editor微信滑動問題

    這篇文章主要介紹了關于uniApp editor微信滑動問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下...

    辛夷不改年年色10162021-12-31
  • js教程JavaScript實現點擊出現子菜單效果

    JavaScript實現點擊出現子菜單效果

    這篇文章主要為大家詳細介紹了JavaScript實現點擊出現子菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    weixin_551084226462022-01-19
  • js教程JS實現鼠標移動拖尾

    JS實現鼠標移動拖尾

    這篇文章主要為大家詳細介紹了JS實現鼠標移動拖尾效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下...

    day09962021-12-21
  • js教程html+css+js實現canvas跟隨鼠標的小圓特效源碼

    html+css+js實現canvas跟隨鼠標的小圓特效源碼

    這篇文章主要介紹了html+css+js實現canvas跟隨鼠標的小圓特效源碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可...

    北極光之夜。11502022-02-17
  • js教程微信小程序如何獲取圖片寬度與高度

    微信小程序如何獲取圖片寬度與高度

    這篇文章主要給大家介紹了關于微信小程序如何獲取圖片寬度與高度的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參...

    bug制造者6312022-02-15
  • js教程js繼承的6種方式詳解

    js繼承的6種方式詳解

    這篇文章主要給大家介紹了關于js繼承的6種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面...

    Selfimpr歐10972022-02-24
主站蜘蛛池模板： 日本视频一区在线观看免费 | 亚洲AV精品一区二区三区不卡 | 爆操| 欧洲老妇人70 | 极限淫生小说 | 好 舒服 好 粗 好硬免费视频 | 久久学生精品国产自在拍 | 久久免费特黄毛片 | 99精品国产美女福到在线不卡 | 无人区1在线观看 | 99视频在线国产 | 春意影院午夜爽爽爽免费 | 操岳母逼小说 | 女子监狱第二季未删减在线看 | 美国女孩毛片 | 美女福利视频网站 | 99久久免费看精品国产一区 | 小小水蜜桃视频高清在线播放 | 男女爆操 | 成人小视频在线观看 | 成人久久18免费网站入口 | 国产福利微拍精品一区二区 | 风间由美vec399 | 被黑人同学彻底征服全文小说阅读 | 波多野结衣中文丝袜字幕 | 97精品国产自在现线免费 | 亚洲精品第五页 | 日本特级a禁片在线播放 | 亚洲理论视频 | 国产精品色爱综合网 | 2021国产精品视频一区 | 99精品免费在线观看 | 日本不卡一区二区三区在线观看 | 天堂网在线.www天堂在线视频 | 人人爽人人草 | 1769最新资源站 | 视频在线免费看 | 国产精品视频久 | 成人久久久 | 波多野结中文字幕在线69视频 | 青草视频久久 |