大家好，本人是初入前端的一枚程序猿，深知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. php后台拼接输出table表格

    <?php header("Content-type:text/html;charset=utf-8"); $str=''; $str.='<table border= ...

  2. crontab中引入环境变量（比如需要执行tomcat的关闭启动）

    起因 crontab中的定时任务,执行到关闭tomcat时,报环境变量找不到 解决方案 1.使用 . /etc/profile 引入环境变量 ###推荐, 实测ubuntu12 成功 2.使用 sou ...

  3. 【Android Developers Training】 53. 打印HTML文档

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. 自己编写的 C++ 超轻量级日志类

    [自己编写的 C++ 超轻量级日志类(兼容vc++6.0.vs2010.vs2015)] 先来看效果: [测试文件:test.cpp] /* 作者:闫文山 时间:2017/07/02 介绍: 本日志类 ...

  5. jzoj3760. 【BJOI2014】Euler

    题目大意: 欧拉函数  φ(n)  定义为不超过正整数 n 并且与 n 互素的整数的数目. 可以证明 φ(n) =  n ∗ ∏ (1 − 1 / pi). 其中 pi(1 <= i <= ...

  6. 在H3C交换机上开通一个VLAN并且开通一个端口ping通它

    <H3C>system-view System View: return to User View with Ctrl+Z. [H3C]interface vlan-interface 2 ...

  7. 使用镜像仓库托管自己构建的Docker镜像

    自己构建的Docker镜像,默认存储在本机中,Docker有提供某些方式分享这些镜像,但不是主流的镜像分享方式,也有违于开源社区的共享精神. 本文介绍如何使用GitHub托管Dockerfile:使用 ...

  8. 基于微信小程序的系统开发准备工作

    腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够 ...

  9. 简单的.NET后台定时服务框架

    后台服务只要是有一定经验的开发人员都接触过,其中离不开服务创建,调度逻辑处理,业务逻辑编写等环节.往往我们在新建一个后台服务项目的时候都会去拷贝以前的代码,再写一些线程等方式去完成,然后又去处理服务的 ...

  10. UWP中使用Composition API实现吸顶（1）

    前几天需要在UWP中实现吸顶,就在网上找了一些文章: 吸顶大法 -- UWP中的工具栏吸顶的实现方式之一 在UWP中页面滑动导航栏置顶 发现前人的实现方式大多是控制ListViewBase的Heade ...