大家好，本人是初入前端的一枚程序猿，深知js底层开发的重要性，这也是我的软肋所在（曾经以为），渐渐的明白了一个道理，饭要一口口吃，路要一步步走，这也是我想告诉给所有刚刚进入IT行业的技术员们，沉下心，静下气，顺便来指点我的小demo,嘿嘿，不多说了，直接上图吧！

这是最终的效果图（支持ie8以上的浏览器，此效果图是谷歌浏览器下展示的），输入不同的金额、时间（可选项为3月，6月，9月，12月）、利率（可选项为5%，6%),点击计算后，最终在计算结果下，得出应得利息与总额。

下面为js原生代码

下图为html代码

自己写的样式，献丑啦，以及整个小demo，核心点是js里计算的部分，一定要记住把字符串要转换为整数，否则最后的结果就成了拼接字符串了。

本人的第一篇博客文，请大家多多指点，本人的邮箱是1101605132@qq.com，欢迎大家提出指正！十分感谢！

最后有句话和大家共勉------- 成功的速度必须超过父母老去的速度！

js存款计算器原生小demo的更多相关文章

  1. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  2. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  3. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  4. 基于Two.js实现的一个小demo，星球环绕动画效果

    下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...

  5. js事件学习的小demo

    直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  6. 利用css3和js实现旋转木马图片小demo

    先看效果图: 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. js 一些有意思的小Demo

  8. css | js 实现扩展卡片小demo

    1.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

随机推荐

  1. webdriver API中文文档

    1.1   下载selenium2.0的lib包 http://code.google.com/p/selenium/downloads/list 官方UserGuide:http://seleniu ...

  2. Vulkan Tutorial 24 Descriptor pool and sets

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 描述符布局描述了前一章节讨论过的可以绑定的描述符的类型.在 ...

  3. bootstrap-datepicker的bug:有日期输入的地方在下个月页面选择当天日期会以当天日期减少一个月显示

    Bug复现详细描述:先选择今日日期,然后点击下个月的某个日期,注意,是直接点击下个月的某个日期,不能通过日期显示tab的下个月箭头进入下个月再来点击某个日期,然后再直接点击本月的今日日期.然后bug会 ...

  4. java的三大特性，封装，继承，多态

    封装 /** * 所谓封装,就是将对象具有的成员变量和成员函数包装和隐藏起来,让外界无法直接使用, * 被封装的成员只能通过某些特定的方式才能访问. * 实现封装有两个步骤: *   1.将不能暴露的 ...

  5. C# 中关于接口实现、显示实现接口以及继承

    先列出我写的代码: 接口以及抽象类.实现类 public interface IA { void H(); } public interface IB { void H(); } public abs ...

  6. win7-x64安装mysql5.7.11（官方zip版）

    1.下载官方安装包(http://www.mysql.com/downloads/),此zip包是没有安装器的(*.msi),也没有辅助配置的自动程序. 2.解压zip包,将文件放入指定目录,如:D: ...

  7. JSON.parse()与JSON.stringify()的区别

    JSON.parse()[从一个字符串中解析出json对象] 例子: //定义一个字符串 var data='{"name":"goatling"}' //解析 ...

  8. Python的元类

    1.用元类验证子类 每当我们定义新类的时候,元类就会运行雅正代码,以确保这个新类符合规定的规范. Python系统把子类的class语句处理完毕,就会调用元类的 __new__ 方法.元类可以通过 _ ...

  9. Java纸牌小demo以及日历小demo

    //卡牌类 public class Card { //定义卡牌的点数 public static final String[] cardName = { "3", "4 ...

  10. Java版 QQ空间自动登录无需拷贝cookie一天抓取30WQQ说说数据&流程分析

    QQ空间说说抓取难度比较大,花了一个星期才研究清楚! 代码请移步到GitHub GitHub地址:https://github.com/20100507/Qzone [没有加入多线程,希望你可以参与进 ...