微信小程序实现简单计算器
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序写简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序写的简单计算器，供大家参考，具体内容如下
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: 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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：详解React中key的作用
下一篇：Vue实现无缝轮播效果