Implementing calculator functions with WeChat applet

Implementing calculator functions with WeChat applet

This article is a simple calculator written using the WeChat applet. Interested friends can take a look.

Page Sections

<view class='box'>
     <view class='txt'>{{screenNum}}</view> 
    <view capture-bind:touchstart="compute">
     <view>
       <button data-val='clear' class='boxtn btn1'>AC</button>
       <button data-val='back' class='boxtn btn1'>←</button>
       <button data-val='#' class='boxtn btn1'>#</button>
       <button data-val='/' class='boxtn btn'>/</button>
     </view>
       <view>
       <button data-val='7' class='boxtn'>7</button>
       <button data-val='8' class='boxtn'>8</button>
       <button data-val='9' class='boxtn'>9</button>
       <button data-val='*' class='boxtn btn'>*</button>
     </view>
       <view>
       <button data-val='4' class='boxtn'>4</button>
       <button data-val='5' class='boxtn'>5</button>
       <button data-val='6' class='boxtn'>6</button>
       <button data-val='-' class='boxtn btn'>-</button>
     </view>
       <view>
       <button data-val='1' class='boxtn'>1</button>
       <button data-val='2' class='boxtn'>2</button>
       <button data-val='3' class='boxtn'>3</button>
       <button data-val='+' class='boxtn btn'>+</button>
     </view>
       <view>
       <button data-val='1' class='boxtn btn2'>0</button>
       <button data-val='.' class='boxtn'>.</button>
       <button data-val='=' class='boxtn btn'>=</button>
     </view>
    </view>
</view>

Style section

.box{
  width:100%;
  height: 700px;
  background: #000;
}
.txt{
  color: #fff;
  width: 100%;
  height:120px;
  font-size: 50px;
  text-align: right;
}
.boxtn{
  width: 90px;
  height:90px;
  display:block;
  float:left;
  border-radius: 50%;
  line-height: 90px;
  text-align: center;
  margin-left: 3px;
  margin-top: 5px;
  color:#fff;
  background: #333333;
  font-weight: bold;
  font-size: 25px;
}
.btn{
  background: #f09a37;
}
.btn1{
  background: #a5a5a5;
  color:#000;
}
.btn2{
  width: 180px;
  border-radius: 40px;
}

js part

//index.js
//Get the application instance const app = getApp()

Page({

  /**
   * Initial data of the page */
  data: {
    screenNum: 0, //The number displayed on the screen currentNum: '', //The current input number storage: 0, //The stored number operator: '', //Operator off: false,
  },

  compute: function (e) {
    var btn_num = e.target.dataset.val;
    var obj = this;
    if (!isNaN(btn_num)) {
      if (obj.data.off == true) {
        obj.data.currentNum = ''
        obj.data.off = false;
      }
      obj.data.currentNum += btn_num
      obj.data.currentNum = Number(obj.data.currentNum);
      obj.data.currentNum = obj.data.currentNum.toString();
    } else {
      switch (btn_num) {
        case '+':
        case '-':
        case '*':
        case '/':
        case '=':
          // Store the current number on the screen and the operator into the variable if (obj.data.storage == 0) {
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          } else {
            if (obj.data.off != true) {
              if (obj.data.operator == '+') {
                obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum)
              } else if (obj.data.operator == '-') {
                obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum)
              } else if (obj.data.operator == '*') {
                obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum)
              } else if (obj.data.operator == '/') {
                obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum)
              }
            }
            obj.data.storage = obj.data.currentNum;
            obj.data.operator = btn_num;
          }

          obj.data.off = true;
          break;
        case 'clear':
          obj.data.storage = 0;
          obj.data.currentNum = '0';
          obj.data.operator = '';
          break;
        case 'back':
          obj.data.currentNum = obj.data.currentNum.slice(0, -1);
          if (obj.data.currentNum == '') {
            obj.data.currentNum = '0';
          }
          break;
        case '.':
          if (obj.data.currentNum.indexOf('.') == -1) { // Check whether "." is included
            obj.data.currentNum += btn_num
          }
          break;
      }
    }
    obj.setData({
      screenNum: obj.data.currentNum
    })
  },

})

The effect diagram is as follows

WeChat Developer Tools Download Address

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
  • WeChat applet implements simple calculator function
  • WeChat applet implements calculator function
  • WeChat applet calculator example
  • WeChat applet implements calculator function
  • WeChat applet implements simple calculator function
  • WeChat applet implements a simple calculator
  • WeChat applet simple calculator implementation code example
  • WeChat applet calculator example

<<:  Will this SQL writing method really cause the index to fail?

>>:  Modify the jvm encoding problem when Tomcat is running

Recommend

MySQL cursor functions and usage

Table of contents definition The role of the curs...

Display flex arrangement in CSS (layout tool)

Regarding display: flex layout, some people have ...

MySQL 8.0.15 installation and configuration graphic tutorial under Win10

This article records the installation and configu...

Install Docker on Linux (very simple installation method)

I have been quite free recently. I have been doin...

CocosCreator general framework design resource management

Table of contents Problems with resource manageme...

A few experiences in self-cultivation of artists

As the company's influence grows and its prod...

Can't connect to local MySQL through socket '/tmp/mysql.sock' solution

Error message: ERROR 2002: Can't connect to l...

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis st...

Several common CSS layouts (summary)

Summary This article will introduce the following...

MySQL decimal unsigned update negative numbers converted to 0

Today, when verifying the concurrency problem of ...

MySQL 8.0.20 installation tutorial and detailed tutorial on installation issues

Original address: https://blog.csdn.net/m0_465798...

A Brief Analysis of MySQL PHP Syntax

Let's first look at the basic syntax of the c...

How to use and limit props in react

The props of the component (props is an object) F...

Use Typescript configuration steps in Vue

Table of contents 1. TypeScript is introduced int...

Use SQL statement to determine whether the record already exists before insert

Table of contents Determine whether a record alre...