微信小程序实现利息计算器

本文为大家分享了微信小程序实现利息计算器的具体代码,供大家参考。

一、案例说明

设计一个小程序,输入本金、利率,默认本金10000元、利率3%,计算存入银行,复利计息情况下五年后得到多少钱?(每过1年,将本金和利息相加作为新的本金)(使用for循环实现)

二、案例代码

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">利息计算机</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文件

/**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循环。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程宝库

 子组件的显示与隐藏在使用Vue开发前端页面的过程中,经常都会遇到需要在父组件中控制子组件的显示/隐藏,比如弹出窗口。最简单的方法就是:通过父子组件间的数据双向绑定来实现。这种方法虽然简单,但只是针 ...