微信小程序实现简易加法计算器

本文实例为大家分享了微信小程序实现加法计算器的具体代码，供大家参考，具体内容如下

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现简易加法计算器的详细内容...