微信小程序实现简单计算器
短信预约 -IT技能 免费直播动态提醒
微信小程序写的简单计算器，供大家参考，具体内容如下
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;
}
.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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
