快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)利息計(jì)算器

更新時(shí)間：2022年09月09日 11:11:40 作者：桃豆豆

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

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

一、案例說明

設(shè)計(jì)一個(gè)小程序，輸入本金、利率，默認(rèn)本金10000元、利率3%，計(jì)算存入銀行，復(fù)利計(jì)息情況下五年后得到多少錢？(每過1年，將本金和利息相加作為新的本金)(使用for循環(huán)實(shí)現(xiàn))

二、案例代碼

1) index.xml文件

<!--index.wxml-->
?
<image src="/image/lixi.png" style="width: 750rpx; height: 435rpx; display: inline-block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"></image>
?
<view class="box">
? <view class="title">利息計(jì)算機(jī)</view>
? <view>
? ? <input placeholder="請(qǐng)輸入本金" type="number" bindblur="moneyNum"></input>
? ? <input placeholder="請(qǐng)輸入利率" type="number" bindblur="lilvNum"></input>
? </view>
? <button ?type="primary" bindtap="calc">總金額</button>
</view>
?
<view class="box1">
? <view>五年后總金額為：{{sum}}</view>
</view>?

2）index.wxss文件

/**index.wxss**/
?
input{
? border-bottom: 1px solid blue;
? margin: 20px 0;
}
?
button{
? margin-top: 20px;
? color: aqua;
}

3）index.js文件

// index.js
?
var money,lilv,sum;
?
Page({
? moneyNum:function(e){
? ? money=parseInt(e.detail.value);
? },
?
? lilvNum:function(e){
? ? lilv=parseInt(e.detail.value);
? },
?
? calc:function(){
? ? for(var i=1;i<=5;i++){
? ? ? money*=(1+lilv/100)
? ? }
? ? this.setData({
? ? ? sum:money
? ? })
? }
})

注意：lilvNum函數(shù)用來獲取利率值，但是利用的是parseInt（），獲取的是int型數(shù)值，所以在程序輸入利率時(shí)要輸入整數(shù)型，例如：3或者3%,而不能輸入：0.03。

三、效果圖

四、分析總結(jié)

在index.wxml文件中，定義了兩個(gè)input組件和一個(gè)button組件，設(shè)置input組件的bindblur屬性綁定失去焦點(diǎn)的事件函數(shù)來獲取組件的value值，設(shè)置button組件的bindtap屬性綁定點(diǎn)擊按鈕的事件函數(shù)來進(jìn)行求和計(jì)算。在index.js文件中分別對(duì)其三個(gè)事件函數(shù)進(jìn)行定義和具體編寫，通過this.setData（）方法將結(jié)果渲染到視圖層。

在編寫calc函數(shù)中，主要利用了for循環(huán)。

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

您可能感興趣的文章: