微信小程序实现简单计算器

微信小程序写的简单计算器，供大家参考，具体内容如下

jisaunqi.js

// pages/jisuanqi/jisuanqi.jsPage({
  /**   * 页面的初始数据   */  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

{
  "usingcomponents": {
}
,  "navigationBarTitleText": "计算器"}
    

jisuanqi.wXMl

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

.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;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序实现简易计算器
• 用微信小程序实现计算器功能
• 微信小程序实现简单计算器功能
• 微信小程序实现计算器小功能
• 微信小程序计算器实例详解
• 微信小程序实现计算器功能
• 微信小程序实现简单的计算器功能
• 微信小程序 简易计算器实现代码实例
• 微信小程序实现计算器案例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！