A simple calculator written by WeChat mini program is for your reference. The specific content is as follows
// pages/jisuanqi/
Page({
/**
* Initial data of the page
*/
data: {
result:"0",
string:"",
cal:"",
num1:"",
num2:""
},
btSubmit:function(e){
(e);
var num1 = .num1;
var cal = ;
var num2 = .num2;
var char= ;
var string ;
if((char>="0"&&char<="9"||char=='.')&&cal==""){
num1=num1+char;
({
num1:num1,
})
}
else if((char>="0"&&char<="9"||char=='.')&&cal!=""){
num2=num2+char;
({
num2:num2,
})
}
else {
cal=char;
({
cal:cal,
})
}
({
string:num1+cal+num2
})
},
clean:function(e){
({
string:"",
num1:"",
num2:"",
cal:""
})
},
calculate:function(e){
var num1 = .num1;
var num2 = .num2;
var cal = ;
var result;
switch(cal){
case '+':result=num1*1+num2*1;break;
case '-':result=num1*1-num2*1;break;
case '*':result=(num1*1)*(num2*1);break;
case '/':result=(num1*1)/(num2*1);break;
}
num1=result;
cal="";
num2="";
({
result:result,
num1:num1,
cal:cal,
num2:num2
})
},
reverse:function(e){
var cal = ;
var num1 = .num1;
var num2 = .num2;
if(cal==""){num1="-";}
else if(cal!=""){num2="-"}
({
num1:num1,
num2:num2
})
},
lololo:function(e){
(123)
},
confirm:function(e){
(555);
(e)
},
event:function(e){
({
url: '/pages/event/event',
})
},
bindinput:function(e){
(1)
},
jisuanqi:function(e){
var n1=.num1;
var n2=.num2;
var result=n1*1+n2*1;
(n1);
(n2);
(result);
({
result:result
})
},
tiaozhuan:function(e){
({
url: '/pages/9x9form/9x9form',
})
},
/**
* Lifecycle function-listen to page load
*/
onLoad: function (options) {
},
/**
* Lifecycle function--listening page rendering is completed for the first time
*/
onReady: function () {
},
/**
* Lifecycle function--listening page display
*/
onShow: function () {
},
/**
* Lifecycle function--listening page hidden
*/
onHide: function () {
},
/**
* Lifecycle function-listening page uninstall
*/
onUnload: function () {
},
/**
* Page-related event handling function-listen to user pull-down action
*/
onPullDownRefresh: function () {
},
/**
* The handling function of the bottoming event on the page
*/
onReachBottom: function () {
},
/**
* User clicks to share
*/
onShareAppMessage: function () {
}
})
{
"usingComponents": {},
"navigationBarTitleText": "calculator"
}
<view class="container">
<view class="view1">{{string}}</view>
<view class="view2">{{result}}</view>
<view class="button-group">
<button class="button">history</button>
<button class="button" bindtap="clean">C</button>
<button class="button"></button>
<button class="button" bindtap="btSubmit">/</button>
</view>
<view class="button-group">
<button class="button" bindtap="btSubmit">7</button>
<button class="button" bindtap="btSubmit">8</button>
<button class="button" bindtap="btSubmit">9</button>
<button class="button" bindtap="btSubmit">*</button>
</view>
<view class="button-group">
<button class="button" bindtap="btSubmit">4</button>
<button class="button" bindtap="btSubmit">5</button>
<button class="button" bindtap="btSubmit">6</button>
<button class="button" bindtap="btSubmit">-</button>
</view>
<view class="button-group">
<button class="button" bindtap="btSubmit">1</button>
<button class="button" bindtap="btSubmit">2</button>
<button class="button" bindtap="btSubmit">3</button>
<button class="button" bindtap="btSubmit">+</button>
</view>
<view class="button-group">
<button class="button" bindtap="reverse">-(Symbol minus)</button>
<button class="button" bindtap="btSubmit">0</button>
<button class="button" bindtap="btSubmit">.</button>
<button class="button" bindtap="calculate">=</button>
</view>
</view>
<navigator url="/pages/event/event">Jump toevent</navigator>//
.button{
width: 160rpx;
height: 100rpx;
margin-left: 10rpx;
padding-left: 10rpx;
margin-top: 10rpx;
text-align: center;
line-height: 100rpx;
padding: 5px;
border-radius: 5px;
}
.button-group{
display: flex;
flex-direction: row;
align-content: flex-start;
}
.container{
display: flex;
flex-direction: column;
justify-content: flex-end;
/* align-content: flex-end; */
}
.view1{
height: 100rpx;
background-color: #e4e4e4;
line-height: 100rpx;
font-size: 20px;
}
.view2{
height: 100rpx;
margin-top: 5px;
background-color: #e4e4e4;
line-height: 100rpx;
font-size: 20px;
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.