微信小程序?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)容如下

一、案例說(shuō)明

設(shè)計(jì)一個(gè)小程序，輸入本金、利率，默認(rèn)本金10000元、利率3%，計(jì)算存入銀行，復(fù)利計(jì)息情況下五年后得到多少錢(qián)？(每過(guò)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ù)用來(lái)獲取利率值，但是利用的是parseInt（），獲取的是int型數(shù)值，所以在程序輸入利率時(shí)要輸入整數(shù)型，例如：3或者3%,而不能輸入：0.03。

三、效果圖

四、分析總結(jié)

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

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

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

您可能感興趣的文章:

相關(guān)文章

C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記
這篇文章主要給大家分享了一位C#程序員入門(mén)學(xué)習(xí)微信小程序的筆記，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
js性能優(yōu)化如何更快速加載你的JavaScript頁(yè)面
JavaScript現(xiàn)在極其重要。一些網(wǎng)站使用JavaScript來(lái)增添魅力;如今的許多Web應(yīng)用程序依賴(lài)它;其中一些甚至是完全用JavaScript編寫(xiě)而成的。我在本文中將指出一些重要的規(guī)則，介紹如何使用你的JavaScript、使用哪些工具以及你將從中得到什么好處
2012-03-03
每天一篇javascript學(xué)習(xí)小結(jié)（Date對(duì)象）
這篇文章主要介紹了javascript中的Date對(duì)象知識(shí)點(diǎn)，對(duì)Date對(duì)象的基本使用方法，以及各種方法進(jìn)行整理，感興趣的小伙伴們可以參考一下
2015-11-11
webpack構(gòu)建vue項(xiàng)目的詳細(xì)教程（配置篇）
本篇文章主要介紹了webpack構(gòu)建vue項(xiàng)目的詳細(xì)教程（配置篇），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
ES6中Promise的使用方法實(shí)例總結(jié)
這篇文章主要介紹了ES6中Promise的使用方法,結(jié)合實(shí)例形式總結(jié)分析了Promise對(duì)象中的各種常用方法及基本使用技巧,需要的朋友可以參考下
2020-02-02
javascript實(shí)現(xiàn)的簡(jiǎn)單的表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)的簡(jiǎn)單的表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下
2015-07-07
Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦)
這篇文章主要介紹了Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
javascript遞歸函數(shù)定義和用法示例分析
這篇文章主要介紹了javascript遞歸函數(shù)定義和用法示例分析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
JS 常用校驗(yàn)函數(shù)
比較常用到的一些字符驗(yàn)證函數(shù)，里面有正則等好東西，推薦大家保存即可直接調(diào)用。
2009-03-03
純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
本文給大家分享的是純js實(shí)現(xiàn)的類(lèi)似flash里的圖片環(huán)繞旋轉(zhuǎn)效果，非常炫酷，有需要的小伙伴可以參考下。
2015-04-04