微信小程序实现简易加法计算器
更新时间:2022年09月09日 10:35:55 作者:阿呱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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
js window.onload 加载多个函数和追加函数详解
本篇文章主要是对js window.onload 加载多个函数和追加函数进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助2014-01-01JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
在Ajax应用中,调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成。2009-08-08
最新评论