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

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

jisaunqi.js

// 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

{
  \"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;
}

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