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

Angular environment construction and simple experience summary

Introduction to Angular Angular is an open source...

How to transfer files between Docker container and local machine

To transfer files between the host and the contai...

MySQL encoding utf8 and utf8mb4 utf8mb4_unicode_ci and utf8mb4_general_ci

Reference: MySQL character set summary utf8mb4 ha...

Analysis of the locking mechanism of MySQL database

In the case of concurrent access, non-repeatable ...

Steps to deploy Docker project in IDEA

Now most projects have begun to be deployed on Do...

Data URI and MHTML complete solution for all browsers

Data URI Data URI is a scheme defined by RFC 2397...

JavaScript css3 to implement simple video barrage function

This article attempts to write a demo to simulate...

Navicat for MySQL 11 Registration Code\Activation Code Summary

Recommended reading: Navicat12.1 series cracking ...

Detailed explanation of how to implement secondary cache with MySQL and Redis

Redis Introduction Redis is completely open sourc...

...

Vue implements the method example of tab routing switching component

Preface This article introduces the use of vue-ro...

How to extend Vue Router links in Vue 3

Preface The <router-link> tag is a great to...

js to achieve the effect of dragging the slider

This article shares the specific code of how to d...

Mysql command line mode access operation mysql database operation

Usage Environment In cmd mode, enter mysql --vers...

Vertical and horizontal splitting of MySQL tables

Vertical Split Vertical splitting refers to the s...