【Web前端】HTML表单＜input＞元素应用：制作网页版复利计算器

最新推荐文章于 2021-06-29 01:20:27 发布
最新推荐文章于 2021-06-29 01:20:27 发布
阅读量452 收藏 1
点赞数
分类专栏： Web前端 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dawson_Ho/article/details/109707661
版权

本项目主要实现功能：

用户输入本金、利率、年限，计算出相应复利。

复利公式：p（i + 1）^n

p：本金

i：利率

n：年限

 

本项目涉及的主要知识点：

  • HTML表单的<input>元素
  • HTML DOM方法

 

实现原理：

通过<input>元素接收用户输入的数据，

利用JS获取本金、利率和年限等数据然后计算复利，

最后输出。

 

 

 

 

效果图 
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>复利计算器</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Cimoon_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
使用js实现一个复利计算器的HTML网页
lgd123abc的博客
01-17 740
个人的一个小作业，仅供参考，希望对你有所帮助。 界面： 代码： <!DOCTYPE html> <!-- 复利计算器 --> <!-- toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 parseFloat() 函数解析字符串并返回浮点数。 此函数确定指定字符串中的第一个字符是否为数字。如果是，它会解析字符串直到到达数字的末尾，并将数字作为数字而不是字符串返回。 注意：只返回字符串中的第一个数字！ 注释：允许前导和尾随空格。 注释：如果
JavaScript实现存款利息计算器
弱弱的小雨鸟
10-13 5584
最终效果   实现代码 * { font: normal normal 15px "微软雅黑"; } div { width: 380px; margin: 0 auto; } table { margin: 20px auto; } input { width: 180px; height: 20px;
html input 数值计算,JS操作input标签内数值计算
weixin_39850331的博客
06-29 579
这次给大家带来，的注意事项有哪些，下面就是实战案例，一起来看一下。window.onload=function(){var oIput1=document.getElementById('put1');var oIput2=document.getElementById('put2');var nAdd=document.getElementById('add');var nSub=documen...
js progress 滑动条实现投资计算器
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
05-08 403
此文为js实现投资计算器，并且对复投与非复投的盈利进行对比。如下图： 技术方面就用到一个简单的滑块，因为感觉比较简单所以打算手写一下，不想再因为这一个小东西引入一个庞大的UI插件，该文就此诞生。 滑块核心js 就这么一点点，其余均为盈利计算。 // 移动端事件 onTouchEvent(e) { // 滑块移动横向距离 this.touchx = e.touches[0].pageX - 40; this.computedAmount(e.target.id); }, // pc 端事件 .
HTML中两个input计算,input取值，并计算，_html/css_WEB-ITnose
weixin_34665627的博客
06-23 602
jsp页面显示：我想点击+,-按钮，改变数量，并改变小计的值，一个容易实现，但是多个怎么实现？看图， 一个怎么实现的，多个就怎么实现，贴出你一个实现的代码你可以这样做，在打印的时候每一行给出一个id那么第一行可以是0，那么第一行的输入框的id为 input_0写一个方法function show_num(input_id,item){var target=document.getElementBy...
interest-calculator:基于 JavaScript 的利息计算器
08-04
同样的，我们可以用JavaScript实现一个复利计算器函数： ```javascript function calculateCompoundInterest(principal, rate, time) { return principal * Math.pow(1 + rate, time); } ``` ### HTML界面设计 ...
贷款计算器：一个简单的贷款计算器。 基本HTML。 CSS和JS
02-09
HTML标签如`<form>`用于创建表单，`<input>`用于创建输入字段，`<button>`用于创建交互按钮，`<p>`或`<div>`用于展示结果。 **CSS（Cascading Style Sheets）** CSS负责网页的样式和布局。在贷款计算器中，CSS可以...
基于html5开发的房贷计算器.zip
最新发布
02-13
HTML5的表单控件也得到了增强，新增了`<input type="number">`、`<input type="range">`等，这些可以直接用于房贷计算器的输入字段，如设定贷款金额、年利率范围等，提供更友好的交互体验。同时，`<form>`元素的新...
interest-ing:利率计算器
05-01
<label>年利率:</label> <input type="number" value={rate} onChange={(e) => setRate(e.target.value)} /> <label>年数:</label> <input type="number" value={years} onChange={(e) => setYears(e.target....
Calculator:计算器网站。 您会发现许多使用计算器的前
03-15
它通过一系列预定义的标签来组织网页内容，如`<h1>`用于标题，`<p>`用于段落，`<a>`用于链接，以及`<input>`用于表单元素，如计算器上的数字按钮和操作符号。为了创建一个计算器网站，开发者可能还会用到CSS（层叠...
Juros-Composto:使用HTML和JavaScript的简单复利计算器使用HTML和JavaScript的简单复利计算器
05-11
复利 使用html和javascript的简单复利计算器//使用HTML和JavaScript的简单复利计算器
jquery理财收益计算器 源码
03-15
javascript的一个简易利率计算器+js图像显示 代码,校验
表单内容计算求和功能.html
04-16
html表单的内容计算求和功能，里面有详细的解释和出错原因。非常详细。供以后学习和使用。
html输入内容计算,HTML 中input输入内容即时计算事件
weixin_35784728的博客
06-05 427
html>监听输入框值的即时变化onpropertychangeoninputfunctionimmediately(){varelement=document.getElementById("mytext");if("\v"=="v"){element.onpropertychange=webChange;}else{element.addEventListe...
html 自动计算,使用JavaScript实现Input输入数据后自动计算并实时显示
weixin_35504293的博客
05-30 776
代码实现：无标题function sum(obj) {var z = document.getElementById("z");var a = document.getElementById("a");var b = document.getElementById("b");var c = document.getElementById("c");all.value=parseInt(z.valu...
HTML 中input输入内容即时计算事件
chuanping7294的博客
08-12 549
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metaname="auther"content="fq"/> <title>监听输入框值的...
html的input里计算和,input.html
weixin_39601642的博客
06-29 170
计算收入计算结果x根据计算，你现在{{initData.typeName}}{{initData.investmentAmount}}元到{{initData.rate}}%年化收益率的产品上，可在{{initData.term}}年{{initData.term*12}}个月后获得{{initData.income}}元的收入。其中，{{initData.term}}年{{initData.te...
利用js实现input输入数据后自动进行计算，实时显示数据
光头强的博客
07-08 3万+
&lt;html&gt;     &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;          &lt;title&gt;无标题&lt;/title&gt;         &lt;script type="text/javasc
javaweb作业制作网页版简易计算器（3种方式）
热门推荐
码客斯基
04-12 3万+
我写的这三种计算器第一种是使用的javascript的方法将加减乘除做成四个按钮，每个按钮都有一个onclick，调用javascript的一个方法，最后将值设置到结果框里就行了。第二种是利用表单提交和转发的方式做的，分别写一个jsp页面上面写表单，然后再写一个servlet文件获取表单里的属性的值然后进行判断和运算，最后将结果转发到jsp页面，jsp页面接收转发的值并将其设置到结果。第三种是是利用javaBean，jsp页面内容与第二种方法基本相同，只是在最后不是利用转发，而是利用javaBean获得属性
<form action="shopinsert.jsp" method="post" > 商品编号：<input type="text" name="id" placeholder="选填"/> 商品名称：<input type="text" name="name" /><br> 商品价格：<input type="text" name="price" /> 所属店铺：<input type="text" name="detail" /><br> 详细信息：<input type="text" name="info" /><br><br> <input type="submit" value="添加" />如何在这段代码的基础上添加商品的图片
06-01
要在这段代码的基础上添加商品的图片，需要在表单中添加一个文件上传的input元素，如下所示： ``` <form action="shopinsert.jsp" method="post" enctype="multipart/form-data"> 商品编号：<input type="text" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cimoon_

一分也是爱，用钱砸我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值