计算器-----------------＞微信小程序

demo01.xml

<view class="all">

 <!-- 标签 -->

  <view class="logo">Calcullator</view>

  <!-- 内容 -->

  <view class="con">

    <view class="con_data">

      <view class="zhi  ee">{{nums}}</view>

      <view class="fuhao ee">{{fuhao}}</view>

      <view class="sum1">

        {{sums}}

      </view>

    </view>

  </view>

  <!-- 计算 -->

  <view class="cal">

    <view class="cal_data">

      <!-- first -->

      <view class="first">

        <view class="fir_bg" bindtap="allbtn">AC</view>

        <view class="first_btn" bindtap="delbtn">del</view>

        <view class="first_btn" bindtap="fu" data-val="÷">÷</view>

        <view class="first_btn" bindtap="fu" data-val="×">×</view>

      </view>

      <!-- first -->

      <view class="first">

        <view class="first_btn" bindtap="num" data-val="7">7</view>

        <view class="first_btn" bindtap="num" data-val="8" id="{{id8}}">8</view>

        <view class="first_btn" bindtap="num" data-val="9">9</view>

        <view class="first_btn" bindtap="fu" data-val="-">-</view>

      </view>

      <!-- first -->

      <view class="first">

        <view class="first_btn" bindtap="num" data-val="4">4</view>

        <view class="first_btn" bindtap="num" data-val="5">5</view>

        <view class="first_btn" bindtap="num" data-val="6">6</view>

        <view class="first_btn" bindtap="fu" data-val="+">+</view>

      </view>

      <!-- first -->

      <view class="first_but">

        <view class="first_butl">

          <view class="first_top">

            <view class="first_btn" bindtap="num" data-val="1">1</view>

            <view class="first_btn" bindtap="num" data-val="2">2</view>

            <view class="first_btn" bindtap="num" data-val="3">3</view>

          </view>

          <view class="first_bottom">

            <view class="first_btn yi" bindtap="num" data-val="0">0</view>

            <view class="first_btn er" bindtap='dot' data-val=".">.</view>

          </view>

        </view>

        <view class="first_butr" data-val="=" bindtap="fu">=</view>

      </view>

    </view>

  </view>

</view>

demo01.wxss

.all {
  width: 100vw;
  height: 100vh;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 100%;
  height: 100rpx;
  /* background-color: pink; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  letter-spacing: .1em;
  color: rgb(91, 89, 89);
}

.con {
  width: 100%;
  height: 360rpx;
  /* background-color: #aaafff; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.con_data {
  width: 95%;
  height: 330rpx;
  background-color: aliceblue;
  border-radius: 20rpx;
  box-shadow: 0rpx 10rpx 20rpx rgb(132, 128, 128) inset;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ee{
  letter-spacing: .1em;
  font-size: 30rpx;
 color: rgb(126, 123, 123);
}

.cal {
  width: 100%;
  height: 720rpx;
  /* background-color: antiquewhite; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.cal_data {
  width: 95%;
  height: 710rpx;
  /* background-color: rgb(143, 181, 214); */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.first {
  width: 100%;
  height: 130rpx;
  /* background-color: pink; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.first_btn {
  width: 160rpx;
  height: 130rpx;
  border-radius: 20rpx;
  box-shadow: 5px 5px 7px #9f9f9f,
    -5px -5px 7px #f1e5e5;
  background-color: rgb(234, 247, 249);
  text-align: center;
  line-height: 130rpx;
  font-size: 48rpx;
}

.fir_bg {
  width: 160rpx;
  height: 130rpx;
  border-radius: 20rpx;
  box-shadow: 5px 5px 7px #9f9f9f,
    -5px -5px 7px #f1e5e5;
  text-align: center;
  line-height: 130rpx;
  font-size: 48rpx;
  background-color: rgb(171, 251, 181);
}

.first_but {
  width: 100%;
  height: 260rpx;
  /* background-color: #3640c5; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.first_btn:hover{
  background-color: #f1e5e5;
}

.first_butl {
  width: 74%;
  height: 280rpx;
  /* background-color: #9f9f9f; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.first_butr {
  width: 160rpx;
  height: 270rpx;
  background-color: rgb(255, 190, 127);
  box-shadow: 5px 5px 7px #9f9f9f,
    -5px -5px 7px #f1e5e5;
    text-align: center;
    line-height: 270rpx;
    font-size: 48rpx;
    border-radius: 20rpx;
}
.first_butr:hover{
  background-color: orangered;
}
.first_top{
  width: 100%;
  height: 130rpx;
  /* background-color: aqua; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.first_bottom{
  width: 100%;
  height: 130rpx;
  /* background-color: rgb(121, 191, 97); */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yi{
  width: 340rpx;
  text-align: left;
  padding-left: 70rpx;
  box-sizing: border-box;
}
pages{
  background-color: #f1e5e5;
}
.sum1{
  margin-left: 190rpx;
  margin-top: 120px;
  /* background-color: aqua; */
  text-align: center;
  line-height: 100rpx;
  font-size: 60rpx;
  color: rgb(103,176,223);
}
view{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

 demo01.js

Page({

    data: {
        nums: '',
        fuhao: '',
        sums: ''
    },

    // 赋值计算结果
    result: null,
    // 加入控制
    flag: false,

    // 拿值
    num(e) {
        console.log(e.target.dataset.val);
        let num = e.target.dataset.val
        if (this.data.nums === '0' || this.flag) {
            this.setData({
                nums: num
            })
            this.flag = false
        } else {
            this.setData({
                nums: this.data.nums + num
            })
        }
        if (this.data.nums.length >9) {
            wx.showToast({
                title: '超过啦~~',
                icon: 'error',
                duration: 2500,
                success: (result) => {
                    if (this.data.nums.length >= 9) {
                        this.data.nums = ''
                    }
                },
            });
        }
    },

    // 计算
    fu(e) {
        let fuhao = this.data.fuhao
        console.log(e.target.dataset.val);
        let num = Number(this.data.nums)
        this.setData({
            fuhao: e.target.dataset.val
        })

        if (this.flag) {
            return
        }

        this.flag = true

        if (this.result === null) {
            this.result = num
            return
        }

        if (fuhao === '+') {
            this.result = this.result + num
        } else if (fuhao === '-') {
            this.result = this.result - num
        } else if (fuhao === '×') {
            this.result = this.result * num
        } else if (fuhao === '÷') {
            this.result = this.result / num
        }

        this.setData({
            sums: this.result + ''
        })
    },
    // 加入点进行运算
    dot(e) {
        let dos = e.target.dataset.val
        if (this.falg) {
            this.setData({
                nums: 0 + dos
            });
            this.falg = false;
            return;
        }

        if (this.data.nums.indexOf(".") >= 0) {
            return;
        }

        this.setData({
            nums: this.data.nums + dos
        })

    },
    // 删除单个
    delbtn(e) {
        // console.log(e);
        // 截取
        let nums = this.data.nums.substr(0, this.data.nums.length - 1)
        let fuhao = this.data.fuhao
        this.setData({
            nums: nums === '' ? 0 : nums,
            fuhao: ''
        })
    },

    // 全部删除
    allbtn(e) {
        this.result = null
        this.flag = false
        this.setData({
            nums: '0',
            fuhao: '',
            sums: ''
        })
    },


})