本文实例为大家分享了微信小程序实现加法计算器的具体代码,供大家参考,具体内容如下 wxml <!--pages/cal/cal.wxml--> <view cla
本文实例为大家分享了微信小程序实现加法计算器的具体代码,供大家参考,具体内容如下
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>
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
.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>
.content{
margin: 40rpx;
}
.content button{
width: 80%;
}
view,button,slider{
margin: 40rpx 0;
}
--结束END--
本文标题: 微信小程序实现简易加法计算器
本文链接: https://www.lsjlt.com/news/167222.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0