微信小程序写的简单计算器，供大家参考，具体内容如下
jisaunqi.js
// pages/jisuanqi/jisuanqi.js
Page({
/**
* 页面的初始数据
*/
data: {
result: "0" ,
string: "" ,
cal: "" ,
num1: "" ,
num2: ""
},
btSubmit: function (e){
console.log(e);
var num1 = this .data.num1;
var cal = this .data.cal;
var num2 = this .data.num2;
var char= e.target.id;
var string ;
if ((char>= "0" &&char<= "9" ||char== '.' )&&cal== "" ){
num1=num1+char;
this .setData({
num1:num1,
})
}
else if ((char>= "0" &&char<= "9" ||char== '.' )&&cal!= "" ){
num2=num2+char;
this .setData({
num2:num2,
})
}
else {
cal=char;
this .setData({
cal:cal,
})
}
this .setData({
string:num1+cal+num2
})
},
clean: function (e){
this .setData({
string: "" ,
num1: "" ,
num2: "" ,
cal: ""
})
},
calculate: function (e){
var num1 = this .data.num1;
var num2 = this .data.num2;
var cal = this .data.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= "" ;
this .setData({
result:result,
num1:num1,
cal:cal,
num2:num2
})
},
reverse: function (e){
var cal = this .data.cal;
var num1 = this .data.num1;
var num2 = this .data.num2;
if (cal== "" ){num1= "-" ;}
else if (cal!= "" ){num2= "-" }
this .setData({
num1:num1,
num2:num2
})
},
lololo: function (e){
console.log(123)
},
confirm: function (e){
console.log(555);
console.log(e)
},
event: function (e){
wx.navigateTo({
url: '/pages/event/event' ,
})
},
bindinput: function (e){
console.log(1)
},
jisuanqi: function (e){
var n1=e.detail.value.num1;
var n2=e.detail.value.num2;
var result=n1*1+n2*1;
console.log(n1);
console.log(n2);
console.log(result);
this .setData({
result:result
})
},
tiaozhuan: function (e){
wx.navigateTo({
url: '/pages/9x9form/9x9form' ,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
jisuanqi.json
{
"usingComponents" : {},
"navigationBarTitleText" : "计算器"
}
jisuanqi.wxml
< view class = "container" >
< view class = "view1" >{{string}}</ view >
< view class = "view2" >{{result}}</ view >
< view class = "button-group" >
< button class = "button" >历史</ button >
< button class = "button" bindtap = "clean" >C</ button >
< button class = "button" ></ button >
< button class = "button" id = "/" bindtap = "btSubmit" >/</ button >
</ view >
< view class = "button-group" >
< button class = "button" id = "7" bindtap = "btSubmit" >7</ button >
< button class = "button" id = "8" bindtap = "btSubmit" >8</ button >
< button class = "button" id = "9" bindtap = "btSubmit" >9</ button >
< button class = "button" id = "*" bindtap = "btSubmit" >*</ button >
</ view >
< view class = "button-group" >
< button class = "button" id = "4" bindtap = "btSubmit" >4</ button >
< button class = "button" id = "5" bindtap = "btSubmit" >5</ button >
< button class = "button" id = "6" bindtap = "btSubmit" >6</ button >
< button class = "button" id = "-" bindtap = "btSubmit" >-</ button >
</ view >
< view class = "button-group" >
< button class = "button" id = "1" bindtap = "btSubmit" >1</ button >
< button class = "button" id = "2" bindtap = "btSubmit" >2</ button >
< button class = "button" id = "3" bindtap = "btSubmit" >3</ button >
< button class = "button" id = "+" bindtap = "btSubmit" >+</ button >
</ view >
< view class = "button-group" >
< button class = "button" bindtap = "reverse" >-(符号减)</ button >
< button class = "button" id = "0" bindtap = "btSubmit" >0</ button >
< button class = "button" id = "." bindtap = "btSubmit" >.</ button >
< button class = "button" bindtap = "calculate" >=</ button >
</ view >
</ view >
< navigator url = "/pages/event/event" >跳转到event</ navigator >//
jisuanqi.wxss
.button{
width : 160 rpx;
height : 100 rpx;
margin-left : 10 rpx;
padding-left : 10 rpx;
margin-top : 10 rpx;
text-align : center ;
line-height : 100 rpx;
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; */
}
.view 1 {
height : 100 rpx;
background-color : #e4e4e4 ;
line-height : 100 rpx;
font-size : 20px ;
}
.view 2 {
height : 100 rpx;
margin-top : 5px ;
background-color : #e4e4e4 ;
line-height : 100 rpx;
font-size : 20px ;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_45972156/article/details/115559212