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

Appreciation of the low-key and elegant web design in black, white and gray

Among classic color combinations, probably no one...

CSS3+HTML5+JS realizes the shrinking and expanding animation effect of a block

When I was working on a project recently, I found...

Tutorial on compiling and installing MySQL 5.7.17 from source code on Mac

1. Download and unzip to: /Users/xiechunping/Soft...

MySQL data analysis storage engine example explanation

Table of contents 1. Introduce cases 2. View the ...

How to set the memory size of Docker tomcat

When installing Tomcat in Docker, Tomcat may over...

MySQL foreign key constraint disable and enable commands

Disabling and enabling MySQL foreign key constrai...

Web project development VUE mixing and inheritance principle

Table of contents Mixin Mixin Note (duplicate nam...

Use of nginx custom variables and built-in predefined variables

Overview Nginx can use variables to simplify conf...

Detailed explanation of how to introduce custom fonts (font-face) in CSS

Why did I use this? It all started with the makin...

Linux RabbitMQ cluster construction process diagram

1. Overall steps At the beginning, we introduced ...

Basic security settings steps for centos7 server

Turn off ping scanning, although it doesn't h...

MySQL master-slave principle and configuration details

MySQL master-slave configuration and principle, f...

Docker Compose practice and summary

Docker Compose can realize the orchestration of D...

Detailed explanation of Excel parsing and exporting based on Vue

Table of contents Preface Basic Introduction Code...