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

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

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
主站蜘蛛池模板: 黄色大片网站 | 国产精品久久久久久福利 | 母性本能 | 大肥臀风间由美 中文字幕 大东北chinesexxxx露脸 | 精品国产福利在线观看一区 | 久久视频这有精品63在线国产 | xxxxx大片在线观看 | 欧美综合在线 | 亚洲天堂精品在线 | 日本在线不卡免 | 亚洲精品福利在线 | 91制片厂制作果冻传媒2021 | 9久热这里只有精品视频在线观看 | 欧美日韩va| 俄罗斯性高清完整版 | 狠狠色狠狠色综合系列 | 青草热视频| 97国产精品久久碰碰牛牛 | 国产乱人乱精一区二区视频密 | poverty中国老妇人 | 明星乱亚洲 | 91麻豆精品国产自产在线 | 国产黄色大片网站 | 精品久久香蕉国产线看观看麻豆 | 免费日本视频 | 丝袜兔女郎被啪在线观看91 | 日本人与黑人做爰视频网站 | 男人影院天堂网址 | 国产在线观看91 | 久久精品国产清白在天天线 | 久久五月综合婷婷中文云霸高清 | 亚洲精品视频在线 | 性直播免费 | 希岛爱理作品在线观看 | 日韩欧美亚洲国产高清在线 | 女仆色在线观看 | 婷婷色在线观看 | 国内揄拍国内精品久久 | 国产精品久久久久久久久久久久久久 | 欧美yyy| 91免费永久国产在线观看 |