微信小程序实现简易加法计算器
作者：阿呱Zoe
这篇文章主要为大家详细介绍了微信小程序加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现加法计算器的具体代码，供大家参考，具体内容如下
wxml
<!--pages/cal/cal.wxml-->
<view class="container">
<input placeholder="被加数" bindinput="bindInput1"/>
<input placeholder="加数" bindinput="bindInput2"/>
<button type="primary" bindtap="bindAdd">计算</button>
<input placeholder="结果" value="{{result}}" disabled/>
</view>js
Page({
/**
* 页面的初始数据
*/
data: {
num1:"",//被加数
num2:"",//加数
result:"" //结果
},
bindAdd:function(e) {
var r =this.data.num1 * 1 +this.data.num2 * 1;
console.log(r);
this.setData({
result: r
});
},
bindInput1:function(e) {
var n = e.detail.value;
console.log(n);
if (!isNaN(n)) {
this.setData({
num1: n
});
};
},
bindInput2:function(e) {
var n = e.detail.value;
console.log(n);
if (!isNaN(n)) {
this.setData({
num2: n
});
};
}
})wxss
/* pages/tabbar2/calc/calc.wxss */
.container{
justify-content: flex-start;
padding: 30rpx 0;
}
.container input{
background-color:#eee;
border-radius: 6rpx;
text-align: left;
width: 720rpx;
height: 100rpx;
line-height: 100rpx;
margin: 20rpx;
}
.container button{
width: 80%;
}改slider的组件
wxml
<!--pages/tabbar2/sliderCalc/sliderCalc.wxml-->
<view class="content">
<view class="section_title">被加数</view>
<slider min="0" max="1000" bindchange="bindInput1" show-value></slider>
<view class="section_title">加数</view>
<slider min="0" max="1000" bindchange="bindInput2" show-value></slider>
<button type="primary" bindtap="bindAdd">计算</button>
<view class="section_title">结果：{{result}}</view>
</view>/* pages/tabbar2/sliderCalc/sliderCalc.wxss */
.content{
margin: 40rpx;
}
.content button{
width: 80%;
}
view,button,slider{
margin: 40rpx 0;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。