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

Web page HTML code: production of scrolling text

In this section, the author describes the special...

Example of how to increase swap in CentOS7 system

Preface Swap is a special file (or partition) loc...

Five things a good user experience designer should do well (picture and text)

This article is translated from the blog Usability...

Vue realizes the palace grid rotation lottery

Vue implements the palace grid rotation lottery (...

Build a server virtual machine in VMware Workstation Pro (graphic tutorial)

The VMware Workstation Pro version I use is: 1. F...

How to operate Docker and images

Find mirror We can search for images from the Doc...

Vue implements the right slide-out layer animation

This article example shares the specific code of ...

React Native startup process detailed analysis

Introduction: This article takes the sample proje...

Application nesting of HTML ul unordered tables

Application nesting of unordered lists Copy code T...

Explanation of factors affecting database performance in MySQL

A story about database performance During the int...

Installing Win10 system on VMware workstation 14 pro

This article introduces how to install the system...