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
Bootstrap3.0 study notes table related
This article mainly explains tables, which are no...
Vue+el-table realizes merging cells
This article example shares the specific code of ...
Several ways to implement "text overflow truncation and omission" with pure CSS
In our daily development work, text overflow, tru...
A complete list of common Linux system commands for beginners
Learning Linux commands is the biggest obstacle f...
React concurrent function experience (front-end concurrent mode)
React is an open-source JavaScript library used b...
Perfectly install Mac OS10.14 under Win10 VM virtual machine (graphic tutorial)
I recently watched Apple's press conference a...
Using js to achieve the effect of carousel
Today, let's talk about how to use js to achi...
The principle and application of MySQL connection query
Overview One of the most powerful features of MyS...
Detailed explanation of the fish school algorithm in CocosCreator game
Preface I recently wanted to learn CocosCreator, ...
Docker builds CMS on-demand system with player function
Table of contents text 1. Prepare the machine 2. ...
How to implement scheduled backup and incremental backup of uploaded files in Linux
introduce If you are using an OSS storage service...
How to Choose the Perfect Aloe Vera Gel? Perfect Aloe Vera Gel How to Identify Authenticity and Fakeness
The latest Perfect Aloe Vera Gel packaging box ha...
Use CSS to achieve 3D convex and concave effects on images (convex out of the frame or concave in the frame)
Ⅰ. Problem description: Use CSS to achieve 3D con...
Detailed explanation of three methods of JS interception string
JS provides three methods for intercepting string...
Modify the default scroll bar style in the front-end project (summary)
I have written many projects that require changin...