脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序利息计算器

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

 更新时间：2022年09月09日 11:11:40   作者：桃豆豆  
这篇文章主要为大家详细介绍了微信小程序实现利息计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现利息计算器的具体代码，供大家参考，具体内容如下

一、案例说明

设计一个小程序，输入本金、利率，默认本金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循环。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • C#程序员入门学习微信小程序的笔记

    C#程序员入门学习微信小程序的笔记

    这篇文章主要给大家分享了一位C#程序员入门学习微信小程序的笔记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js性能优化 如何更快速加载你的JavaScript页面

    js性能优化 如何更快速加载你的JavaScript页面

    JavaScript现在极其重要。一些网站使用JavaScript来增添魅力;如今的许多Web应用程序依赖它;其中一些甚至是完全用JavaScript编写而成的。我在本文中将指出一些重要的规则，介绍如何使用你的JavaScript、使用哪些工具以及你将从中得到什么好处
    2012-03-03
  • 每天一篇javascript学习小结（Date对象）

    每天一篇javascript学习小结（Date对象）

    这篇文章主要介绍了javascript中的Date对象知识点，对Date对象的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • webpack构建vue项目的详细教程（配置篇）

    webpack构建vue项目的详细教程（配置篇）

    本篇文章主要介绍了webpack构建vue项目的详细教程（配置篇），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • ES6中Promise的使用方法实例总结

    ES6中Promise的使用方法实例总结

    这篇文章主要介绍了ES6中Promise的使用方法,结合实例形式总结分析了Promise对象中的各种常用方法及基本使用技巧,需要的朋友可以参考下
    2020-02-02
  • javascript实现的简单的表单验证

    javascript实现的简单的表单验证

    这篇文章主要介绍了javascript实现的简单的表单验证的相关资料,需要的朋友可以参考下
    2015-07-07
  • Smartour 让网页导览变得更简单(推荐)

    Smartour 让网页导览变得更简单(推荐)

    这篇文章主要介绍了Smartour 让网页导览变得更简单(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • javascript递归函数定义和用法示例分析

    javascript递归函数定义和用法示例分析

    这篇文章主要介绍了javascript递归函数定义和用法示例分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JS 常用校验函数

    JS 常用校验函数

    比较常用到的一些字符验证函数，里面有正则等好东西，推荐大家保存即可直接调用。
    2009-03-03
  • 纯JS实现旋转图片3D展示效果

    纯JS实现旋转图片3D展示效果

    本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果，非常炫酷，有需要的小伙伴可以参考下。
    2015-04-04

最新评论