微信小程序?qū)崿F(xiàn)簡易加法計(jì)算器

更新時間：2022年09月09日 10:35:55 作者：阿呱Zoe

這篇文章主要為大家詳細(xì)介紹了微信小程序加法計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)加法計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下

wxml

<!--pages/cal/cal.wxml-->
<view class="container">
? <input placeholder="被加數(shù)" bindinput="bindInput1"/>
? <input placeholder="加數(shù)" bindinput="bindInput2"/>
? <button type="primary" bindtap="bindAdd">計(jì)算</button>
? <input placeholder="結(jié)果" value="{{result}}" disabled/>
</view>

js

Page({
?
? ? /**
? ? ?* 頁面的初始數(shù)據(jù)
? ? ?*/
? ? data: {
? ? ? num1:"",//被加數(shù)
? ? ? num2:"",//加數(shù)
? ? ? result:"" //結(jié)果
? ? },
? ? 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">被加數(shù)</view>
? ? <slider min="0" max="1000" bindchange="bindInput1" show-value></slider>
? ? <view class="section_title">加數(shù)</view>
? ? <slider min="0" max="1000" bindchange="bindInput2" show-value></slider>
? ? <button type="primary" bindtap="bindAdd">計(jì)算</button>
? ? <view class="section_title">結(jié)果：{{result}}</view>
</view>

/* pages/tabbar2/sliderCalc/sliderCalc.wxss */
.content{
? ? margin: 40rpx;
}
.content button{
? ? width: 80%;
}
view,button,slider{
? ? margin: 40rpx 0;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: