服务器之家:专注于服务器技术及软件下载分享
分类导航

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