您的位置:首页 > 编程学习 > > 正文

微信小程序计时器(微信小程序实现简单的计算器功能)

更多 时间:2021-10-12 00:30:11 类别:编程学习 浏览量:1395

微信小程序计时器

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

本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下

wxml

  • <view class='content'>
      <input value='{{calculation}}'></input>
      <view class='box'>
        <button class='yellow-color'>退格</button>
        <button class='yellow-color' bindtap='empty'>清屏</button>
        <button class='yellow-color'>❤</button>
        <button bindtap='add' data-text='+' class='yellow-color'>+</button>
      </view>
    
      <view class='box'>
        <button bindtap='add' data-text='9'>9</button>
        <button bindtap='add' data-text='8'>8</button>
        <button bindtap='add' data-text='7'>7</button>
        <button bindtap='add' class='yellow-color' data-text='-'>-</button>
      </view>
    
      <view class='box'>
        <button bindtap='add' data-text='6'>6</button>
        <button bindtap='add' data-text='5'>5</button>
        <button bindtap='add' data-text='4'>4</button>
        <button bindtap='add' class='yellow-color' data-text='*'>*</button>
      </view>
    
      <view class='box'>
        <button bindtap='add' data-text='3'>3</button>
        <button bindtap='add' data-text='2'>2</button>
        <button bindtap='add' data-text='1'>1</button>
        <button bindtap='add' data-text='/' class='yellow-color'>÷</button>
      </view>
    
      <view class='box'>
        <button bindtap='add' data-text='0'>0</button>
        <button bindtap='add' data-text='.'>.</button>
        <button>历史</button>
        <button class='yellow-color' bindtap='res'>=</button>
      </view>
    
    
    </view>
    
  • wxss

  • input {
      width: 95%;
      height: 250rpx;
      margin: 0 auto;
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #ccc;
    }
    
    .box {
      display: flex;
    }
    button {
      width: 20%;
      height: 150rpx;
      margin-bottom: 20rpx;
      line-height: 150rpx;
      background-color:rgb(0, 150, 250);
      color: white;
    }
    
    .yellow-color {
      background-color: rgb(247, 142, 24)
    }
    
  • JS

  • //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        calculation:"",
        result:0,
        character:[],  // 运算符号
        operand: [],    // 数字
        temp:false
      },
    
      // 输入框输入数据
      add:function(e) {
        let input = e.currentTarget.dataset.text;
        var that = this;
        if (input == '+' || input == '-' || input == '*' || input == '/') {
          this.data.temp = false; // 用于记录上一次是否是操作符
          var item = 'character[' + this.data.character.length+ ']';
          this.setData({
            [item] :input
          }) 
        } else {
          var item = 'operand['+this.data.operand.length+']';
         
          if(that.data.temp) {
            // 拿到前一个的值
            var res = 'operand[' + (this.data.operand.length-1) + ']'
            
            var ress= that.data.operand.length-1;
            var xyz = that.data.operand[ress] * 10 + parseInt(input);
            that.setData({
              [res]:xyz
            })
          } else {
            input = parseInt(input);
            that.data.temp = true;
            that.setData({
              [item]: input
            })
          }
        }
        // 将所有的内容放到显示框中
        this.setData({
          calculation:this.data.calculation+input
        })
    
      },
    
      // 计算答案
      res:function() {
        console.log(this.data.character.length);
        console.log(this.data.operand.length)
        var character_len =  this.data.character.length ;
        var operand_len = this.data.operand.length;
        console.log(operand_len - character_len)
        if(operand_len - character_len == 1) {
          this.data.result = this.data.operand[0];
          console.log("初始值"+this.data.result);
          for(var i=0;i<character_len;i++) {
            if(this.data.character[i] == '+') {
              this.data.result = this.data.result + this.data.operand[i + 1];
    
            }
            if (this.data.character[i] == '-') {
              this.data.result = this.data.result - this.data.operand[i + 1];
    
            }
            if (this.data.character[i] == '*') {
              this.data.result = this.data.result * this.data.operand[i + 1];
    
            }
            if (this.data.character[i] == '/') {
              this.data.result = this.data.result / this.data.operand[i + 1];
    
            }
            
          }
        } else {
          this.setData({
            result:'输入有误,清空数据,重新输入'
          })
        }
    
        this.setData({
         calculation:this.data.result
        })
      },
    
      // 清空屏幕
      empty:function() {
        this.setData({
          calculation: "",
          result: 0,
          character: [],  // 运算符号
          operand: [],    // 数字
          temp: false
        }
      }
    })
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣