WeChat applet implements calculator function
|
WeChat Mini Programs are becoming more and more popular. I have also seen many college students learning them on their own. Those who specialize in APP development and web development have seen the prospects of Mini Programs and have also gotten involved in the field of Mini Programs. I also taught myself how to learn Mini Programs. In the early days, like many people, I encountered some things I didn’t understand and wanted to ask others. I went to Tieba, but there were a lot of advertisements and no one to help solve the problem. Today I will teach some beginners how to make a calculator. If C is the best beginner language for programming, then the calculator should be considered an introductory demo for small programs. I hope that beginners will carefully appreciate the following code, from wxml to js, and then to wxss (page layout). You must understand the meaning of each code. Without further ado, here is the effect diagram. This is a calculator I made when I was getting started. It is very simple and the logic is very simple. It is just the logic of the most common calculator around us. I think from this demo I have learned more about the layout knowledge of wxss pages.
Code attached: app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "Smart Calculator"
},
"tabBar": { //Additionally, my tabBar is used to set the bottom tab "color":"#ff69b4",
"selectedColor":"#0000ff",
"backgroundColor":"#ffff00",
"list": [
{
"pagePath": "pages/index/index",
"text": "Computer"
},
{
"pagePath": "pages/logs/logs",
"text": "Log"
},
{
"pagePath":"pages/logs/logs",
"text":"Go home"
}
]
}
}/*app.wxss/*
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}**If you don’t recognize some of these components, it is recommended to go to the WeChat Mini Program official website to read them several times index.wxml:
<template name="calculator-key">
<button hover-start-time="{{5}}" hover-stay-time="{{100}}" hover-class="calculator-key-hover" data-key="{{className}}" class="calculator-key {{className}}">{{display}}</button>
</template>
<view class="calculator">
<view class="calculator-display">
<view class="calculator-display-text">{{displayValue}}</view>
</view>
<view class="calculator-keypad">
<view class="input-keys">
<view class="function-keys" catchtap="onTapFunction">
<template is="calculator-key" data="{{className: 'key-clear', display: clearDisplay ? 'C' : 'C'}}"/>
<template is="calculator-key" data="{{className: 'key-sign', display: '+/-'}}"/>
<template is="calculator-key" data="{{className: 'key-percent', display: '%'}}"/>
</view>
<view class="digit-keys" catchtap="onTapDigit">
<template is="calculator-key" data="{{className: 'key-0', display: '0'}}"/>
<template is="calculator-key" data="{{className: 'key-dot', display: '●'}}"/>
<template is="calculator-key" data="{{className: 'key-1', display: '1'}}"/>
<template is="calculator-key" data="{{className: 'key-2', display: '2'}}"/>
<template is="calculator-key" data="{{className: 'key-3', display: '3'}}"/>
<template is="calculator-key" data="{{className: 'key-4', display: '4'}}"/>
<template is="calculator-key" data="{{className: 'key-5', display: '5'}}"/>
<template is="calculator-key" data="{{className: 'key-6', display: '6'}}"/>
<template is="calculator-key" data="{{className: 'key-7', display: '7'}}"/>
<template is="calculator-key" data="{{className: 'key-8', display: '8'}}"/>
<template is="calculator-key" data="{{className: 'key-9', display: '9'}}"/>
</view>
</view>
<view class="operator-keys" catchtap="onTapOperator">
<template is="calculator-key" data="{{className: 'key-divide', display: '÷'}}"/>
<template is="calculator-key" data="{{className: 'key-multiply', display: '×'}}"/>
<template is="calculator-key" data="{{className: 'key-subtract', display: '−'}}"/>
<template is="calculator-key" data="{{className: 'key-add', display: '+'}}"/>
<template is="calculator-key" data="{{className: 'key-equals', display: '='}}"/>
</view>
</view>
</view>index.js:
Page({
data: {
value: null, // The result of the last calculation. null means there is no result of the last calculation. displayValue: '0', // Display value operator: null, // The symbol of the last calculation. null means there is no unfinished calculation. waitingForOperand: false // Whether the previous key is a calculation symbol. },
onLoad: function (options) {
this.calculatorOperations = {
'key-divide': (prevValue, nextValue) => prevValue / nextValue,
'key-multiply': (prevValue, nextValue) => prevValue * nextValue,
'key-add': (prevValue, nextValue) => prevValue + nextValue,
'key-subtract': (prevValue, nextValue) => prevValue - nextValue,
'key-equals': (prevValue, nextValue) => nextValue
}
},
/* AC operation, back to the time before liberation*/
clearAll() {
this.setData({
value: null,
displayValue: '0',
operator: null,
waitingForOperand: false
})
},
/* Clear only the currently displayed input value*/
clearDisplay() {
this.setData({
displayValue: '0'
})
},
onTapFunction: function (event) {
const key = event.target.dataset.key;
switch (key) {
case 'key-clear':
if (this.data.displayValue !== '0') {
this.clearDisplay();
} else {
this.clearAll();
}
break;
case 'key-sign':
var newValue = parseFloat(this.data.displayValue) * -1
this.setData({
displayValue: String(newValue)
})
break;
case 'key-percent':
const fixedDigits = this.data.displayValue.replace(/^-?\d*\.?/, '')
var newValue = parseFloat(this.data.displayValue) / 100
this.setData({
displayValue: String(newValue.toFixed(fixedDigits.length + 2))
});
break;
default:
break;
}
},
onTapOperator: function (event) {
const nextOperator = event.target.dataset.key;
const inputValue = parseFloat(this.data.displayValue);
if (this.data.value == null) {
this.setData({
value: inputValue
});
} else if (this.data.operator) {
const currentValue = this.data.value || 0;
const newValue = this.calculatorOperations[this.data.operator](currentValue, inputValue);
this.setData({
value: newValue,
displayValue: String(newValue)
});
}
this.setData({
waitingForOperand: true,
operator: nextOperator
});
},
onTapDigit: function (event) {
const key = event.target.dataset.key; // Mark the key according to data-key if (key == 'key-dot') {
// Press the period if (!(/\./).test(this.data.displayValue)) {
this.setData({
displayValue: this.data.displayValue + '.',
waitingForOperand: false
})
}
} else {
// Press the number key const digit = key[key.length - 1];
if (this.data.waitingForOperand) {
this.setData({
displayValue: String(digit),
waitingForOperand: false
})
} else {
this.setData({
displayValue: this.data.displayValue === '0' ? String(digit) : this.data.displayValue + digit
})
}
}
}
})index.wxss:
page {
height:100%;
}
.calculator {
width: 100%;
height: 100vh;
border:solid 1px;
background: rgb(238, 5, 5);
position: relative;
box-shadow: 0px 0px 20px 0px rgb(211, 41, 41);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.calculator-display { /*Display background color*/
background: #2c2a2c;
flex: 1;
}
/*TODO: Solve the problem of vertical centering of text and display digital color*/
.calculator-display-text {
padding: 0 30px;
font-size: 3em;
color: rgb(245, 245, 248);
text-align: right;
}
.calculator-keypad {
display: flex;
}
.calculator .function-keys {
display: flex;
color:rgb(245, 13, 13);
}
.calculator .digit-keys {
background: #0808f7;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
.calculator-key-hover { /*The color of the button after pressing it*/
box-shadow: inset 0px 0px 25vw 0px hsla(71, 90%, 48%, 0.898);
}
.calculator-key {
background-color:aqua;
display: block;
width: 25vw;
height: 25vw;
line-height: 25vw;
border-top: 1px solid rgb(6, 245, 78);
border-right: 1px solid rgb(19, 241, 12);
text-align: center;
box-sizing: border-box;
}
.calculator .function-keys .calculator-key {
font-size: 2em;
}
.calculator .digit-keys .calculator-key {
font-size: 3em;
}
.calculator .digit-keys .key-0 {
width: 50vw;
text-align: left;
padding-left: 9vw;
}
.calculator .digit-keys .key-dot {
padding-top: 1em;
font-size: 0.75em;
}
.calculator .operator-keys .calculator-key {
color: rgb(248, 165, 10);
border-right: 0;
font-size: 3em;
}
.calculator .function-keys {
background: linear-gradient(to bottom, rgb(6, 6, 240) 0%, rgb(52, 5, 240) 100%);
}
.calculator .operator-keys {
background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
}
.input-keys {
width: 100%;
}
.operator-keys {
width: 100%;
}
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:
|
<<: Standard summary for analyzing the performance of a SQL statement
>>: Detailed explanation of the practical application of centos7 esxi6.7 template
Recommend
Some ways to solve the problem of Jenkins integrated docker plugin
Table of contents background Question 1 Error 2 E...
CSS achieves the effect of changing the color of the entire line when the mouse is placed on it
summary: The following is a method for changing t...
The connection between JavaScript constructors and prototypes
Table of contents 1. Constructors and prototypes ...
Solution to using html2canvas to process Dom elements with Baidu map into images
Problem 1: Baidu Map uses tiled images (the map i...
How to solve the problem that VMware virtual machine bridge mode cannot access the Internet
Step 1: Check the local Ethernet properties to se...
More than 300 lines of CSS code to achieve the explosive special effects of WeChat 8.0
A major feature of the WeChat 8.0 update is the s...
Implementing password box verification information based on JavaScript
This article example shares the specific code of ...
Solutions to browser interpretation differences in size and width and height in CSS
Let’s look at an example first Copy code The code ...
echars 3D map solution for custom colors of regions
Table of contents question extend Solving the pro...
mysql implements the operation of setting multiple primary keys
User table, ID number must be unique, mobile phon...
js to achieve floor scrolling effect
This article uses jQuery to implement the sliding...
JavaScript implements click toggle function
This article example shares the specific code of ...
Some notes on installing fastdfs image in docker
1. Prepare the Docker environment 2. Search for f...
Docker nginx example method to deploy multiple projects
Prerequisites 1. Docker has been installed on the...
The most detailed method to install docker on CentOS 8
Install Docker on CentOS 8 Official documentation...