微信小程序实现利息计算器
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序实现利息计算器的具体代码，供大家参考，具体内容如下
一、案例说明
设计一个小程序，输入本金、利率，默认本金10000元、利率3%，计算存入银行，复利计息情况下五年后得到多少钱？(每过1年，将本金和利息相加作为新的本金)(使用for循环实现)
二、案例代码
1) index.xml文件
<!--index.wxml-->
<image class="lazy" data-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">利息计算机</view>
<view>
<input placeholder="请输入本金" type="number" bindblur="moneyNum"></input>
<input placeholder="请输入利率" type="number" bindblur="lilvNum"></input>
</view>
<button type="primary" bindtap="calc">总金额</button>
</view>
<view class="box1">
<view>五年后总金额为：{{sum}}</view>
</view> 2）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函数用来获取利率值，但是利用的是parseInt（），获取的是int型数值，所以在程序输入利率时要输入整数型，例如：3或者3%,而不能输入：0.03。
三、效果图
四、分析总结
在index.wxml文件中，定义了两个input组件和一个button组件，设置input组件的bindblur属性绑定失去焦点的事件函数来获取组件的value值，设置button组件的bindtap属性绑定点击按钮的事件函数来进行求和计算。在index.js文件中分别对其三个事件函数进行定义和具体编写，通过this.setData（）方法将结果渲染到视图层。
在编写calc函数中，主要利用了for循环。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341