大家好，本人是初入前端的一枚程序猿，深知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. Apple官方文档译文GitHub框架源码注解

    引导

  2. MySQL(三)--函数与谓词

    前文已有涉及,这里作为总结重新整理一下. 一.函数 1.算术函数 NUMERIC 是大多数 DBMS 都支持的一种数据类型,通过 NUMBERIC ( 全体位数, 小数位数 ) 的形式来指定数值的大小 ...

  3. Spring源码：IOC原理解析（一）

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! IOC(Inversion of Control),即控制反转,意思是将对象的创建和依赖关系交给第三方容器处理,我们要用的时候告诉容器我们 ...

  4. Educational Codeforces Round 22.B 暴力

    B. The Golden Age time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. 流行框架(angularj基础)

  6. Spring+Mybatis配置

    Spring+Mybatis配置 之前做项目的时候用到了spring+mybatis框架,一直想抽空整理一下 Mybatis: mybatis是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架 ...

  7. JavaWeb 后端 <四> 之 Cookie HttpSession 学习笔记

    一.会话管理概述 1.什么是会话? 好比一次通话.打开浏览器,点击多次链接(发出多次请求和收到多次的响应),关闭浏览器,这个过程就是一次会话. 有功能 可以  文件 新建会话 2.解决的问题是什么? ...

  8. UGUI射线检测

    1.Graphic Raycaster 主要用于UI上的射线检测,挂有这个组件的物体,必须要挂上Canvas这个组件(当挂上Graphic Raycaster时Canvas也会自动挂上). Ignor ...

  9. 事务之使用JDBC进行事务的操作

    本篇讲述数据库中非常重要的事务概念和如何使用MySQL命令行窗口来进行数据库的事务操作.下一篇会讲述如何使用JDBC进行数据库的事务操作. 事务是指数据库中的一组逻辑操作,这个操作的特点就是在该组逻辑 ...

  10. 2.1 insertion sort 《算法导论》答案

    2.1 insertion sort <算法导论>答案 答案索引帖 2.1-1 Using Figure 2.2 as a model, illustrate the operation ...