WeChat applet implements simple calculator function

WeChat applet implements simple calculator function

WeChat applet: Simple calculator, for your reference, the specific contents are as follows

For those who have just come into contact with mini programs, it is very difficult to get started with a highly practical project. If we want to quickly become familiar with the use of mini programs, we can first try to make a simple calculator.

Run screenshot

The calculator does not have high requirements for the aesthetics of the interface. It is just a combination of some views and button controls, so there is no need to spend a lot of effort on the interface. What is important is the logic layer. The reason why I chose the calculator as the first project is that the logic of the calculator can be simple or complex, and it can fully adapt to the beginners' level of mastery of mini programs.

Main code

js:

Page({
  data: {
   result:"0",
   id1:"clear",
   id2:"back",
   id3:"time",
   id4:"div",
   id5:"mul",
   id6:"sub",
   id7:"add",
   id8:"dot",
   id9:"eql",
   id10:"num_0",
   id11:"num_1",
   id12:"num_2",
   id13:"num_3",
   id14:"num_4",
   id15:"num_5",
   id16:"num_6",
   id17:"num_7",
   id18:"num_8",
   id19:"num_9",
   buttonDot:false,
   is_time:false
  },
  clickButton: function (e) {
   console.log(e);
   var buttonVal = e.target.id;
   var res = this.data.result;
   if(this.data.is_time==true){
    res=0
  }
   var newbuttonDot=this.data.buttonDot;
   var sign;
   if (buttonVal >= "num_0" && buttonVal <= "num_9") {
    var num=buttonVal.split('_')[1];
    if (res == "0" || ((res.length-0) -(length-1)) == "=") {
     res = num;
    }
    else {
     res = res + num;
    }
   }
   else{
    if(buttonVal=="dot")
    {
     if(!newbuttonDot)
     {
      res = res + '.';
     }
    }
    else if(buttonVal=="clear")
    {
     res='0';
    }
    else if(buttonVal=="back")
    {
     var length=res.length;
     if(length>1)
     {
      res=res.substr(0,length-1);
     }
     else{
      res='0'; 
     }
    }
    else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
    {
      if(res.length){}
      else{
        res = JSON.stringify(res)
      }  
      var is_sign=res.substr(res.length-1,res.length)
      if(is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){
        res=res.substr(0,res.length-1);
      }
     switch(buttonVal){
      case "div":
       sign = '÷';
       break;
      case "mul":
       sign = '×';
       break;
      case "sub":
       sign='-';
       break;
      case "add":
       sign='+';
       break;
     }
     if(!isNaN(res.length))
     {
      res.length-1;
      res=res+sign;
     }
    }
   }
   this.setData({
    is_time:false,
    result: res,
    buttonDot:newbuttonDot,
   });
  },
  equal: function(e){
   var str=this.data.result;
   var item= '';
   var strArray = [];
   var temp=0;
   for(var i=0;i<=str.length;i++){
    var s = str.charAt(i);
    if((s!='' && s>='0' && s<='9') || s=='.'){
     item=item+s;
    }
    else{
     strArray[temp]=item;
     temp++;
     strArray[temp]=s;
     temp++;
     item='';
    }
   }
   if(isNaN(strArray[strArray.length-1]))
   {
    strArray.pop();
   }
   var num;
   var res=strArray[0]*1;
   for(var i=1;i<=strArray.length;i=i+2){
    num=strArray[i+1];
    switch(strArray[i]){
     case "-":
      res = (res-0)-(num-0);
      break;
     case "+":
      res = (res-0) + (num-0);
      break;
     case "×":
      res = (res-0)* (num-0);
      break;
     case "÷":
     if(num!='0')
     {
      res = (res-0)/ (num-0);
     }
     else
     {
      res = '∞';
      break;
     } 
      break;
    }
   }
   this.setData({
    result:res,
   });
  },
  time:function(e){
   var util = require("../../utils/util.js");
   var time = util.formatTime(new Date());
   this.setData({
    result:time,
    is_time:true
   });
  }})

wxml

<!--index.wxml-->
<view class="project_name">Simple Calculator</view>
<view class="screen_content">
  <view class="screen">{{result}}</view>
</view>
<view class="content"> 
 <view class="buttonGroup">
  <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
  <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
  <button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow">
  <icon type="waiting" color="#66CC33"></icon>
  </button>
  <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
 </view> 
 <view class="buttonGroup"> 
  <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
  <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
  <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
  <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
 </view>
 <view class="buttonGroup">
  <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
  <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
  <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
  <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
 </view>
 <view class="buttonGroup">
  <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
  <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
  <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
  <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
 </view>
 <view class="buttonGroup">
  <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
  <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
  <button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button>
 </view>
</view>

wxss:

/**index.wxss**/
page{
  background: #f5f5f5;
 }
 .project_name{
   position:absolute;
   top:25px;
   width:100%;
   text-align: center;
   font-size: 30px;
 }
 .screen_content{
  position: fixed;
  color: #1b1717;
  background: #fff;
  font-size: 40px;
  bottom: 390px;
  text-align: right;
  height:100px;
  width: 100%;
  word-wrap: break-word;
  border-top:1px solid #a8a8a8;
  border-bottom:1px solid #a8a8a8;
 }
 .screen{
  position: absolute;
  font-size: 40px;
  text-align: right;
  bottom:0px;
  width: 96%;
  left:2%;
  word-wrap: break-word;
 }
 .content{
  position: fixed;
  bottom: 0;
 }
 .buttonGroup{
  display: flex;
  flex-direction: row;
 }
 .buttonitem{
  text-align: center;
  line-height: 120rpx;
  width: 25%;
  border-radius: 0;
 }
 .buttonitem1{
  width: 192rpx;
  text-align: center;
  line-height: 120rpx;
  border-radius: 0;
 }
 icon{
  position: absolute;
  top: 20%;
  left: 67rpx;
 }
 .color{
  background: #fff;
 }
 .equal{
   width: 380rpx;
   text-align: center;
   line-height: 120rpx;
   border-radius: 0;
   background: #fff;
 }
 .shadow{
  background: #e9ebe9;
 }

postscript

I have only given a rough treatment of addition and subtraction here, but such a calculator already has basic functions. As our mastery deepens, we can also add more complex functions such as square and square root, so as to master the development of small programs.

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 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

<<:  How to change MySQL character set utf8 to utf8mb4

>>:  CentOS7 deploys version 19 of docker (simple, you can follow it)

Recommend

Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT

Sometimes it is slow to download large network fi...

MySQL 5.7.11 zip installation and configuration method graphic tutorial

1. Download the MySQL 5.7.11 zip installation pac...

Knowledge about MySQL Memory storage engine

Knowledge points about Memory storage engine The ...

How to Fix File System Errors in Linux Using ‘fsck’

Preface The file system is responsible for organi...

Summary of the top ten problems of MySQL index failure

Table of contents background 1. The query conditi...

Detailed explanation of Vue transition effects and animation transition usage examples

Table of contents transition hook function Custom...

Steps for installing MySQL 8.0.16 on Windows and solutions to errors

1. Introduction: I think the changes after mysql8...

A brief analysis of kubernetes controllers and labels

Table of contents 01 Common controllers in k8s RC...

Vue+axios sample code for uploading pictures and recognizing faces

Table of contents Axios Request Qs processing dat...

How to install MySQL 5.7.28 binary mode under CentOS 7.4

Linux system version: CentOS7.4 MySQL version: 5....

Python connects to the database MySQL decompressed version installation configuration and encountered problems

introduction Today I learned how to connect to th...

How to create dynamic QML objects in JavaScript

1. Dynamically create objects There are two ways ...

How to display JSON data in HTML

background: Sometimes we need to display json dat...

Several things to note when making a web page

--Homepage backup 1.txt text 2. Scan the image 3. ...

Jenkins Docker static agent node build process

A static node is fixed on a machine and is starte...