微信小程序如何制作一个简单的加法计算器应用？

本文共计470个文字，预计阅读时间需要2分钟。

本例展示如何用微信小程序实现加法计算器。代码如下：

结果：{{result}}

javascript// pages/cal/cal.jsPage({ data: { num1: '', num2: '', result: '' }, bindInput1: function(e) { this.setData({ num1: e.detail.value }); }, bindInput2: function(e) { this.setData({ num2: e.detail.value }); }, calculate: function() { const num1=parseFloat(this.data.num1); const num2=parseFloat(this.data.num2); if (!isNaN(num1) && !isNaN(num2)) { const result=num1 + num2; this.setData({ result: result }); } }});

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

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

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