Fatal编程技术网
  • javascript/
  • Javascript 如何在计算器中显示总数？

Javascript 如何在计算器中显示总数？

javascript html css

Javascript 如何在计算器中显示总数？,javascript,html,css,calculator,Javascript,Html,Css,Calculator,所以我为我的工作做了一个计算器，看看我们能为潜在客户节省多少钱。所有的工作都很好，但我不能得到所有的盒子出现的总费用。我只是觉得我不知道在最后把“每月总储蓄”加起来的正确方法 下面是一个JSFIDLE： 这是页面： 下面是代码： <html> <head> <title>First Data Calculator</title> <meta charset="utf-8" /> <meta http-equiv="Content

所以我为我的工作做了一个计算器，看看我们能为潜在客户节省多少钱。所有的工作都很好，但我不能得到所有的盒子出现的总费用。我只是觉得我不知道在最后把“每月总储蓄”加起来的正确方法

下面是一个JSFIDLE：

这是页面：

下面是代码：

<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>


第一数据计算器
身体{
背景色：#E5；
}
#容器{
字体系列：塔荷马，日内瓦，无衬线；
}
#主要{
边缘底部：50px；
字号：3em；
文字装饰：下划线；
}
#维萨博克斯{
显示：内联块；
宽度：238px；
背景色：#fce4d1；
填充：15px；
边界半径：6px；
高度：238px；
边框：#c9c9c9实心1px；
}
.盒子{
显示：内联块；
左边距：20px；
垂直对齐：顶部；
宽度：238px；
背景色：#fce4d1；
填充：15px；
高度：238px；
边界半径：6px；
边框：#c9c9c9实心1px；
}
.头衔{
利润率：0.8px；
}
.投入{
利润率：7px；
高度：25px；
宽度：200px；
}
.文字{
利润率：7px08px；
}
.计算器{
利润率：7px；
高度：25px；
边界半径：5px；
背景色：#F3；
}
#总数{
利润率：30px05px；
字体大小：1.3em；
}
#完成按钮{
字体大小：1.3em；
边界半径：7px；
背景色：#F3；
}
费用计算器
签证




算计
EMDR=

每月储蓄=

每年的储蓄=


五年储蓄=

万事达卡




算计
EMDR=

每月储蓄=

每年的储蓄=


五年储蓄=

英特拉克




算计
每个交易=


每月储蓄=

每年的储蓄=


五年储蓄=

其他费用




算计

每月储蓄=

每年的储蓄=


五年储蓄=

完成

每月总储蓄=


年度储蓄总额=




document.getElementById（“vCalc”）.onclick=function（）{
var visaVol=document.getElementById（“vVol”）.value；
var visaFees=document.getElementById（“vFees”）.value；
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（“VMMonthlySpan”）.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=“”+McYearal+“$”；
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（“IDppertTranspan”）.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（“otherFees”）.value；
var ourFees=document.getElementById（“ourFees”）.value；
var ocMonthlySav=（其他费用）toFixed（2）；
var ocYearlySav=（ocMonthlySav*12）。toFixed（2）；
var ocFiveSav=（Ocyerlysav*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+“$”；
}

当您完成90%的任务时，您似乎刚刚退出（希望不是这样）

但要完成此操作，您需要从
xxMonthlySpan
和
xxYearlySpan
标记中获取值，将它们转换为浮动，将它们添加到一起，然后最后更改
span
标记的
innerHTML

您也没有
，因此我在中添加了它，以便与您拥有的所有其他内容保持一致

我还将全年的总数四舍五入到小数点后两位

这是一把小提琴：

如果您有任何问题，请发表评论。

您想在哪里显示总计？
var monTotal=
此变量包含什么？我们非常谨慎，不喜欢单击URL。我在这里创建了一个JSFIDLE:var monTotal=is where 
<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>