大家好，本人是初入前端的一枚程序猿，深知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. linux 下载文件到本地磁盘的命令是什么

    linux下可以直接运行命令下载或上传文件1.检查并安装相应的包:yum install lrzsz2.使用 sz 文件名 现在相应的文件到本地磁盘.3.上传使用rz 选择相应文件即可.

  2. 实现自己的.NET Core配置Provider之Yaml

    YAML是一种更适合人阅读的文件格式,很多大型的项目像Ruby on Rails都选择YAML作为配置文件的格式.如果项目的配置很少,用JSON或YAML没有多大差别.看看rails项目中的配置文件, ...

  3. 关于拒绝测试驱动开发（NoTDD）

    今天在reddit看到微软某大牛的博客(https://blogs.msdn.microsoft.com/ericgu/2017/06/22/notdd/),说到拒绝TDD(测试驱动开发,下文统一使用 ...

  4. 一个简单的python选课系统

    下面介绍一下自己写的python程序,主要是的知识点为sys.os.json.pickle的模块应用,python程序包的的使用,以及关于类的使用. 下面是我的程序目录: bin是存放一些执行文件co ...

  5. Linux 安装依赖库

    ###安装依赖库###yum -y install rsync net-snmp syslog net-snmp-devel wget patch screen gcc gcc-c++ autocon ...

  6. 第1章 ssh和SSH服务(包含隧道内容)

    本文对SSH连接验证机制进行了非常详细的分析,还详细介绍了ssh客户端工具的各种功能,相信能让各位对ssh有个全方位较透彻的了解,而不是仅仅只会用它来连接远程主机. 另外,本人翻译了ssh客户端命令的 ...

  7. peoplesoft function PSTREENODE 通过 deptid 获得部门树 一级部门 名称

    create or replace function ht_gettopdeptNAME(deptid in varchar) return varchar2 is r ); c int; m ); ...

  8. php 时间问题

    获得简单的日期 date() 函数的格式参数是必需的,它们规定如何格式化日期或时间. 下面列出了一些常用于日期的字符: d - 表示月里的某天(01-31) m - 表示月(01-12) Y - 表示 ...

  9. raft如何实现leadership transfer

    leadership transfer可以把raft group中的leader身份转给其中一个follower.这个功能可以用来做负载均衡,比如可以把leader放在性能更好的机器或者离客户端更近的 ...

  10. MyBatis的关联关系 一对一 一对多 多对多

    一对一示例 一个妻子对应一个丈夫 数据库表设计时 在妻子表中添加一个丈夫主键的作为外键 1 对应的JavaBean代码虽然在数据库里只有一方配置的外键,但是这个一对一是双向的关系. Husband实体 ...