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

// index.js
 
const app = getApp()
 
Page({
  data: {
      describe: "计算",
      num1: null,
      num2: null,
      result: 0
  },
      input1(e) {
      this.setData({
              num1: parseFloat(e.detail.value)
          })
  },
     input2(e) {
      this.setData({
              num2: parseFloat(e.detail.value)
          })
  },
  addButton(e) {
      if (this.data.num1 && this.data.num2) {
          this.setData({
            describe: "加法",
              result: this.data.num1 + this.data.num2
          })
      } 
  },
  subButton(e) {
      if (this.data.num1 && this.data.num2) {
          this.setData({
            describe: "减法",
              result: this.data.num1 - this.data.num2
          })
      } 
 
  },
  mulButton(e) {
      if (this.data.num1 && this.data.num2) {
          this.setData({
            describe: "乘法",
              result: this.data.num1 * this.data.num2
          })
      } 
 
  },
  divButton(e) {
      if (this.data.num1 && this.data.num2) {
          this.setData({
            describe: "除法",
              result: this.data.num1 / this.data.num2
          })
      } 
  },
  jump:function(){
      wx.navigateTo({
        url: '../countingWatch/countingWatch'
      })
  }
 
})

<!--index.wxml-->
 
<view class="firstNum">
    <!-- <text>请输入第一个运算数:</text> -->
    <label class="text" >请输入第一个运算数: </label>
    <input type="digit" bindinput="input1"       style=" border: 2rpx solid #ccc; width:150px;  margin-left: 5px; "/>
</view>
<view class="secondNum">
    <text class="text">请输入第二个运算数:</text>
    <input type="digit" bindinput="input2" style=" border: 2rpx solid #ccc; width:150px;  margin-left: 5px;"/>
</view>
<view class="describe">
    <button bindtap="addButton" style="width: 30rpx;">+</button>
    <button bindtap="subButton" style="width: 30rpx">
    -</button>
    <button bindtap="mulButton" style="width: 30rpx"  >
    *</button>
    <button bindtap="divButton" style="width: 30rpx">
    /</button>
   
</view>
<view class="result">
    <text>{{describe}}结果:{{result}}</text>
</view>
<button bindtap="jump" class="jump">跳转至秒表</button>

/**index.wxss**/
.text{
  font-size: 1.5ex;
  font-weight: 600;
}
.firstNum,
.secondNum,
.result {
  margin: 50rpx;
  display: flex;
  flex-direction: row;
  height:50px;
}
.describe {
  display: flex;
  justify-content: space-evenly;
}
.describe button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  background-color: aqua;
}
.jump{
  background: rgb(204, 19, 221);
  margin-top: 100px;
}

// pages/countingWatch/countingWatch.js
  const app = getApp()
Page({
  data: {
    timer:null,
    minute:  0,   // 分
    second: 0 ,   // 秒
    millisecond:0,
    describe:'开始',
    timeformat:'00:00:00'
  },
 
//计时开始
  start: function () {
 
      if(this.data.describe == "开始"){
          this.setData({
            describe:"停止"
          })
       
          this.setData({
            minute:0,
            second:0,
            millisecond:0
          })
          this.data.timer = setInterval(this.counter,50)
 
      }else{
        this.setData({
          describe:"开始"})
           //这个是系统提供的用于时钟暂停的方法
          clearInterval(this.data.timer)
           
      }
  },  
    counter:function(){
      var second = this.data.second
      var minute = this.data.minute
      var millisecond = this.data.millisecond
       this.setData({
         millisecond:millisecond+5
       })
       if(millisecond >=99){
           this.setData({
            millisecond:0,
           second:second+1
           })
    }
           if(second == 60){
              this.setData({
                second : 0,
                minute:minute+1
              })
           }
 
 
       this.setData({
        timeformat:minute+":"+second+":"+millisecond
       })
 
   
 },
     jump:function(){
       wx.navigateTo({
         url: '../index/index'
       })
     }
  
    })

<!--pages/countingWatch/countingWatch.wxml-->
 
<view class="timeformat">{{timeformat}}</view>
<button  bindtap="start">{{describe}}</button>
<button  class="jump" bindtap="jump">跳转至计算器</button>

/* pages/countingWatch/countingWatch.wxss */
 
button{
  width:150rpx;
  background: rgb(51, 231, 15);
  color: #fff;
  margin-bottom: 8px;
}
.timeformat{
  margin: 20px;
   text-align: center;
   font-weight: 600;
   font-size: 30px;
}
.jump{
  background: rgb(204, 19, 221);
  margin-top: 100px;
}

 {
  "pages": [
    "pages/index/index",
    "pages/countingWatch/countingWatch",
    "pages/logs/logs"
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "两个数的运算",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}