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

Analysis of the principle of Nginx+Tomcat to achieve load balancing and dynamic and static separation

1. Implementation principle of Nginx load balanci...

Detailed tutorial on migrating the home directory to a new partition under Ubuntu

When the user's home directory becomes larger...

Two query methods when the MySQL query field type is json

The table structure is as follows: id varchar(32)...

Install ethereum/Ethereum from scratch under CentOS7

Table of contents Preface Add sudo write permissi...

Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords

http://www.cppcns.com/shujuku/mysql/283231.html Y...

Linux kernel device driver character device driver notes

/******************** * Character device driver**...

Vue implements two routing permission control methods

Table of contents Method 1: Routing meta informat...

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

In the past, float was often used for layout, but...

The perfect solution for MySql version problem sql_mode=only_full_group_by

1. Check sql_mode select @@sql_mode The queried v...

3 common errors in reading MySQL Binlog logs

1. mysqlbinlog: [ERROR] unknown variable 'def...

Tomcat's method of setting ports through placeholders (i.e. parameter specification method)

For work needs, I found a lot of information on t...

Why is UTF-8 not recommended in MySQL?

I recently encountered a bug where I was trying t...

About if contains comma expression in JavaScript

Sometimes you will see English commas ",&quo...

Explanation on whether to choose paging or loading in interactive design

The author of this article @子木yoyo posted it on hi...

Detailed installation process of nodejs management tool nvm

nvm nvm is responsible for managing multiple vers...