WeChat applet implements simple calculator function

WeChat applet implements simple calculator function

This article shares the specific code for the WeChat applet to implement the calculator function for your reference. The specific content is as follows

wxml

<view class='content'>
  <input value='{{calculation}}'></input>
  <view class='box'>
    <button class='yellow-color'>Backspace</button>
    <button class='yellow-color' bindtap='empty'>Clear screen</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>History</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
//Get the application instance const app = getApp()

Page({
  data: {
    calculation:"",
    result:0,
    character:[], // operator symbol operand: [], // number temp:false
  },

  // Input box to enter data add:function(e) {
    let input = e.currentTarget.dataset.text;
    var that = this;
    if (input == '+' || input == '-' || input == '*' || input == '/') {
      this.data.temp = false; // Used to record whether the last time was an operator var item = 'character[' + this.data.character.length+ ']';
      this.setData({
        [item] :input
      }) 
    } else {
      var item = 'operand['+this.data.operand.length+']';
     
      if (that.data.temp) {
        // Get the previous value 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
        })
      }
    }
    // Put all the content into the display box this.setData({
      calculation:this.data.calculation+input
    })

  },

  // Calculate the answer 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("initial value"+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: 'Input is incorrect, clear the data and re-enter'
      })
    }

    this.setData({
     calculation:this.data.result
    })
  },

  // Clear the screen empty:function() {
    this.setData({
      calculation: "",
      result: 0,
      character: [], // operator symbol operand: [], // number temp: false
    }
  }
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet implements a simple calculator
  • Implementing calculator functions with WeChat applet
  • WeChat applet implements simple calculator function
  • WeChat applet implements calculator function
  • WeChat applet calculator example
  • WeChat applet implements calculator function
  • WeChat applet implements a simple calculator
  • WeChat applet simple calculator implementation code example
  • WeChat applet calculator example

<<:  MySQL index coverage example analysis

>>:  Graphic tutorial on installing Mac system in virtual machine under win10

Recommend

Implementation of MySQL Shell import_table data import

Table of contents 1. Introduction to import_table...

TimePicker in element disables part of the time (disabled to minutes)

The project requirements are: select date and tim...

jQuery implements the drop-down box for selecting the place of residence

The specific code for using jQuery to implement t...

The difference and reasons between the MySQL query conditions not in and in

Write a SQL first SELECT DISTINCT from_id FROM co...

Automatically load kernel module overlayfs operation at CentOS startup

To automatically load kernel modules in CentOS, y...

How to use mqtt in uniapp project

Table of contents 1. Reference plugins in the uni...

How to use jsonp in vue

Table of contents 1. Introduction 2. Installation...

Detailed explanation of the solution to font blur when using transform in CSS3

This question is very strange, so I will go strai...

Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial

Preparation 1. Environmental Description: Operati...

30 excellent examples of color matching in web design

Today, this article has collected 30 excellent cas...