- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我为我的工作做了一个计算器,看看我们可以为潜在客户节省多少。一切正常,但我无法获得显示所有框的总费用。我只是不认为我知道将所有“每月总储蓄”加起来的正确过程。
这是一个 JSFiddle:https://jsfiddle.net/snn5vhg2/
这是页面: http://176.32.230.46/sarahmcdonald.com/files/index.html
这是代码:
<html>
<head>
<title>First Data Calculator</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
background-color:#e5e5e5;
}
#container{
font-family:Tahoma, Geneva, sans-serif;
}
#main{
margin-bottom:50px;
font-size:3em;
text-decoration:underline;
}
#VISABOX{
display:inline-block;
width:238px;
background-color:#fce4d1;
padding:15px;
border-radius:6px;
height:238px;
border:#c9c9c9 solid 1px;
}
.boxes{
display:inline-block;
margin-left:20px;
vertical-align:top;
width:238px;
background-color:#fce4d1;
padding:15px;
height:238px;
border-radius:6px;
border:#c9c9c9 solid 1px;
}
.titles{
margin:0 0 0 8px;
}
.inputs{
margin:7px;
height:25px;
width:200px;
}
.words{
margin:7px 0 0 8px ;
}
.calculators{
margin:7px;
height:25px;
border-radius:5px;
background-color:#F3F3F3;
}
#totals{
margin:30px 0 0 5px;
font-size:1.3em;
}
#finishButton{
font-size:1.3em;
border-radius:7px;
background-color:#F3F3F3;
}
</style>
</head>
<body>
<div id="container">
<h1 id="main">Fee Calculator</h1>
<div id="VISABOX" >
<h4 id="VISA" class="titles">Visa</h4>
<input id="vVol" class="inputs" type="text" placeholder="Visa Volume..."/><br>
<input id="vFees" class="inputs" type="text" placeholder="Visa Fees..."/><br>
<button id="vCalc" class="calculators"> Calculate </button>
<p id="vEMDR" class="words">EMDR=<span id="vEMDRSPAN"></span></p>
<p id="vMonthly" class="words">Monthly Savings=<span id="vMonthlySpan"></span></p>
<p id="vYearly" class="words">Yearly Savings=<span id="vYearlySpan"></span></p>
<p id="vFive" class="words">Five Year Savings=<span id="vFiveSpan"></span></p>
</div>
<div id="MCBOX" class="boxes">
<h4 id="MC" class="titles">MasterCard</h4>
<input id="mcVol" class="inputs" type="text" placeholder="MC Volume..."/><br>
<input id="mcFees" class="inputs" type="text" placeholder="MC Fees..."/><br>
<button id="mcCalc" class="calculators"> Calculate </button>
<p id="mcEMDR" class="words">EMDR=<span id="mcEMDRSPAN"></span></p>
<p id="mcMonthly" class="words">Monthly Savings=<span id="mcMonthlySpan"></span></p>
<p id="mcYearly" class="words">Yearly Savings=<span id="mcYearlySpan"></span></p>
<p id="mcFive" class="words">Five Year Savings=<span id="mcFiveSpan"></span></p>
</div>
<div id="IDPBOX" class="boxes">
<h4 id="IDP" class="titles">Interac</h4>
<input id="idpTrans" type="text" class="inputs" placeholder="# of Trans..."/><br>
<input id="idpFees" type="text" class="inputs" placeholder="IDP Fees..."/><br>
<button id="idpCalc" class="calculators"> Calculate </button>
<p id="idpPerTran" class="words">Per Tran=<span id="idpPerTranSpan"></span></p>
<p id="idpMonthly" class="words">Monthly Savings=<span id="idpMonthlySpan"></span></p>
<p id="idpYearly" class="words">Yearly Savings=<span id="idpYearlySpan"></span></p>
<p id="idpFive" class="words">Five Year Savings=<span id="idpFiveSpan"></span></p>
</div>
<div id="OCBOX" class="boxes">
<h4 id="OC" class="titles"> Other Charges </h4>
<input id="otherCharges" type="text" class="inputs" placeholder="Total Other Charges..." /><br>
<input id="ourCharges" type="text" class="inputs" placeholder="Our Other Charges..." /><br>
<button id="ocCalc" class="calculators"> Calculate </button>
<p id="ocMonthly" class="words"> Monthly Savings=<span id="ocMonthlySpan"></span></p>
<p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span></p>
<p id="ocFive" class="words">Five Year Savings=<span id="ocFiveSpan"></span></p>
</div>
<div id="totals">
<button id="finishButton"> Finish </button>
<p id="monthlyTotal"> Monthly Total Savings=<span id="monthlyTotalSpan"></span></p>
<p id="yearlyTotal"> Total Yearly Savings=</p>
</div>
<script type="text/javascript">
document.getElementById("vCalc").onclick=function(){
var visaVol=document.getElementById("vVol").value;
var visaFees=document.getElementById("vFees").value;
var visaEMDR;
visaEMDR=(visaFees/visaVol*100).toFixed(2);
var visaMonthly=(visaFees-(visaVol*.0171)).toFixed(2);
var visaYearly=(visaMonthly*12).toFixed(2);
var visaFive=(visaYearly*5).toFixed(2);
document.getElementById("vMonthlySpan").innerHTML=" "+visaMonthly+"$";
document.getElementById("vYearlySpan").innerHTML=" "+visaYearly+"$";
document.getElementById("vFiveSpan").innerHTML=" "+visaFive+"$";
document.getElementById("vEMDRSPAN").innerHTML=" "+visaEMDR+"%";
}
document.getElementById("mcCalc").onclick=function(){
var mcVol=document.getElementById("mcVol").value;
var mcFees=document.getElementById("mcFees").value;
var mcEMDR=(mcFees/mcVol*100).toFixed(2);
var mcMonthly=(mcFees-(mcVol*.0178)).toFixed(2);
var mcYearly=(mcMonthly*12).toFixed(2);
var mcFive=(mcYearly*5).toFixed(2);
document.getElementById("mcMonthlySpan").innerHTML=" "+mcMonthly+"$";
document.getElementById("mcYearlySpan").innerHTML=" "+mcYearly+"$";
document.getElementById("mcFiveSpan").innerHTML=" "+mcFive+"$";
document.getElementById("mcEMDRSPAN").innerHTML=" "+mcEMDR+"%";
}
document.getElementById("idpCalc").onclick=function(){
var debitTrans=document.getElementById("idpTrans").value;
var debitFees=document.getElementById("idpFees").value;
var perTran=(debitFees/debitTrans).toFixed(2);
var debitMonthly=(debitFees-(debitTrans*.04)).toFixed(2);
var debitYearly=(debitMonthly*12).toFixed(2);
var debitFive=(debitYearly*5).toFixed(2);
document.getElementById("idpPerTranSpan").innerHTML=" "+perTran+"$";
document.getElementById("idpMonthlySpan").innerHTML=" "+debitMonthly+"$";
document.getElementById("idpYearlySpan").innerHTML=" "+debitYearly+"$";
document.getElementById("idpFiveSpan").innerHTML=" "+debitFive+"$";
}
document.getElementById("ocCalc").onclick=function(){
var otherFees=document.getElementById("otherCharges").value;
var ourFees=document.getElementById("ourCharges").value;
var ocMonthlySav=(otherFees-ourFees).toFixed(2);
var ocYearlySav=(ocMonthlySav*12).toFixed(2);
var ocFiveSav=(ocYearlySav*5).toFixed(2);
document.getElementById("ocMonthlySpan").innerHTML=" "+ocMonthlySav+"$";
document.getElementById("ocYearlySpan").innerHTML=" "+ocYearlySav+"$";
document.getElementById("ocFiveSpan").innerHTML=" "+ocFiveSav+"$";
}
document.getElementById("finishButton").onclick=function(){
var monTotal=
document.getElementById("monthlyTotalSpan").innerHTML=" "+monTotal+"$";
}
</script>
最佳答案
似乎您在完成 90% 时就退出了(希望没有)。
但要完成,您需要从 xxMonthlySpan
中获取值和 xxYearlySpan
标签,将它们转换为 float ,将它们相加,然后更改 innerHTML
的 span
标签在最后。
你也没有<span id="yearlyTotalSpan"></span>
所以我添加了它只是为了与您拥有的其他一切保持一致。
我还将年度总数四舍五入到小数点后两位。
这是一个 fiddle :https://jsfiddle.net/qkx8h3hy/
如果您有任何问题,请发表评论。
关于javascript - 如何让总计显示在计算器中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36636833/
我需要一些帮助。 我希望“总计”由“数量*价格=总计”计算(到目前为止没问题)。问题是我还需要通过“总/价格=数量”来计算“数量”,即如果一个字段发生更改,另一个字段也会自动更改。 我做了一个非常简单
我的项目即将结束,但在解决它时遇到了一些问题。我是一名厨师,想要自己的应用程序与他自己的业务相关 我的表单称为“菜谱”,并包含数量、单价、使用百分比。 假设您有 1 公斤苹果,价格为 5 欧元。清洁结
我的数据库表是: 产品展示 - ID - 名称 ... 订单 - ID - 状态 ... OrderItems - ID -order_id -product_id -数量 -line_total 我
我的项目即将结束,但在解决它时遇到了一些问题。我是一名厨师,想要自己的应用程序与他自己的业务相关 我的表单称为“菜谱”,并包含数量、单价、使用百分比。 假设您有 1 公斤苹果,价格为 5 欧元。清洁结
exchanges表结构: id exchange created_at updated_at deleted_at start_time
我正在开发 Telerik RadGrid,网格内有多个 radtextbox,如 A、B、C 和 D。我使用带有正则表达式验证的 radtextbox 来验证带有数字的 A、B 和 C 文本框。然而
我有一个非常简单的$lookup聚合查询,如下所示: {'$lookup': {'from': 'edge', 'localField': 'gid', 'foreignField': 't
我正在尝试做一些与我之前问过的问题非常相似的事情,但我似乎无法让它正常工作。这是我之前的问题:How to get totals per day 表格如下: Table N
[更新] 谢谢大家,最终代码: var EUR_share_cost = 0; var USD_share_cost = 0; var GBP_shar
由于某种原因,下面的这部分代码没有将每个数组项添加到一起。我单步执行调试器,正在创建并递增数组项,但 total += ScoreArray[i]; 似乎没有将已输入的数字相加。相反,我只是将第一个输
我在这里有点迷路了。我有一个 for 循环,它增加一个值,如下所示: int nu01 = 10000; int level = 0; int increase = 35000; for (int i
请引用之前的问题:Sum total for column in jQuery 我使用了 Aymen 的解决方案,但我对其进行了编辑以满足我的需要。它停止工作,我的代码如下所示,在 jsfiddle
Date Flight ID Member ID Seat Type Seat Price 2013-07-28 F71498 M692
我希望程序忽略零总数。我正试图阻止向非参与者提供零总数的汽车奖励。我在 && 运算符后面添加了 >= 表达式。这对于击杀数和净值来说正确吗? $fetch_nor_killers = mysq
我有下表: CREATE TABLE zoom (`id` int, `fb_id` int, `date` datetime); INSERT INTO zoom (`id`, `f
我想知道是否有一种方法可以将已计算的派生列的总和添加到新列中。 Employee_KT_State --------------------------------------------------
在 SQL 中,我想获得来自每个用户的网站点击率的百分比。为此,我需要获取 site hits 列的总和,但我的查询在另一列上使用了 GROUP By。 除了 GROUP BY 中的每个 user_i
我有以下查询: SELECT SUM(case when s1 = 'fel' then 1 else 0 end) as s1_count, SUM(case when s2 = '
我已经使用 HTML 创建了一个表格。该表由一个标题和许多称为 Family 的行组成。每个家庭行可以有许多行代表家庭的各个成员(请参见下面的代码)。 Family N
如何使用 javascript 给出 float 总计。请 friend 们帮助我。 function addNumbers() {
我是一名优秀的程序员,十分优秀!