javascript - JS中的简单计算器

Question

我用纯 JS 创建了一个简单的网络应用程序，通常我有一些我不知道如何解决的问题。首先，你可以在这里看到我的演示工具:http://codepen.io/testerius/pen/EaOPEY

function calculator() {

/* 
    SPEARMAN
    this code below is for Spearman unit
*/

// resource requirements
var spearmanWood = 50;
var spearmanClay = 30;
var spearmanIron = 20;

var spearman = document.getElementById("spearman").value;

// calculate
var spearmanAmount = spearman;
var spearmanWood = spearmanWood * parseInt(spearman);
var spearmanClay = spearmanClay * parseInt(spearman);
var spearmanIron = spearmanIron * parseInt(spearman);
var spearmanProvisions = spearman;
var spearmanTime = spearman * 136; // seconds

// calculate time
var totalSec = spearmanTime;
var hours   = Math.floor(totalSec / 3600);
var minutes = Math.floor((totalSec - (hours * 3600)) / 60);
var seconds = totalSec - (hours * 3600) - (minutes * 60);
var spearmanTime = (hours<10 ? "0" + hours : hours) + ":" + (minutes<10 ? "0" + minutes : minutes) + ":" + (seconds<10 ? "0" + seconds : seconds);

// print to table
document.getElementById("spearmanAmount").innerHTML = spearmanAmount;
document.getElementById("spearmanWood").innerHTML = spearmanWood;
document.getElementById("spearmanClay").innerHTML = spearmanClay;
document.getElementById("spearmanIron").innerHTML = spearmanIron;
document.getElementById("spearmanProvisions").innerHTML = spearmanProvisions;
document.getElementById("spearmanTime").innerHTML = spearmanTime;


/* 
    SWORDSMAN
    this code below is for Swordsman unit
*/

// resource requirements
var swordsmanWood = 30;
var swordsmanClay = 30;
var swordsmanIron = 70;

var swordsman = document.getElementById("swordsman").value;

// calculate
var swordsmanAmount = swordsman;
var swordsmanWood = swordsmanWood * parseInt(swordsman);
var swordsmanClay = swordsmanClay * parseInt(swordsman);
var swordsmanIron = swordsmanIron * parseInt(swordsman);
var swordsmanProvisions = swordsman;
var swordsmanTime = swordsman * 194; // seconds

// calculate time
var totalSec = swordsmanTime;
var hours   = Math.floor(totalSec / 3600);
var minutes = Math.floor((totalSec - (hours * 3600)) / 60);
var seconds = totalSec - (hours * 3600) - (minutes * 60);
var swordsmanTime = (hours<10 ? "0" + hours : hours) + ":" + (minutes<10 ? "0" + minutes : minutes) + ":" + (seconds<10 ? "0" + seconds : seconds);

// print to table
document.getElementById("swordsmanAmount").innerHTML = swordsmanAmount;
document.getElementById("swordsmanWood").innerHTML = swordsmanWood;
document.getElementById("swordsmanClay").innerHTML = swordsmanClay;
document.getElementById("swordsmanIron").innerHTML = swordsmanIron;
document.getElementById("swordsmanProvisions").innerHTML = swordsmanProvisions;
document.getElementById("swordsmanTime").innerHTML = swordsmanTime;


/* 
    SUM OF ALL UNITS
    this code below is for calculate all units
*/

// all
var allAmount = parseInt(spearmanAmount) + parseInt(swordsmanAmount);
var allWood = parseInt(spearmanWood) + parseInt(swordsmanWood);
var allClay = parseInt(spearmanClay) + parseInt(swordsmanClay);
var allIron = parseInt(spearmanIron) + parseInt(swordsmanIron);
var allProvisions = parseInt(spearmanProvisions) + parseInt(swordsmanProvisions);
var allTime = spearmanTime + swordsmanTime;


// all print
document.getElementById("allAmount").innerHTML = allAmount;
document.getElementById("allWood").innerHTML = allWood;
document.getElementById("allClay").innerHTML = allClay;
document.getElementById("allIron").innerHTML = allIron;
document.getElementById("allProvisions").innerHTML = allProvisions;
document.getElementById("allTime").innerHTML = allTime;

它应该如何工作:用户键入他将创建多少个单元，然后 JS 代码为他制定所有计算要求。

如您所见，它可以工作，但我想修复的错误很少，但我缺乏知识对我没有帮助。 :P

问题 #1 - 如何隐藏需求表并仅在用户单击计算按钮时显示它？ CSS？

问题 #2 - 按钮 Reset 清除输入但不清除需求表中的结果，我怎样才能让它工作？

问题 #3 - 时间没有按照我的意愿添加，这可能是字符串错误，但我不知道如何解决它。

问题 #4 - 如您所见，我重复了一些代码，长矛手和剑客的代码非常相似。您知道如何减少重复吗？

好的，这就是我想问你们的全部内容。希望有人能帮助我。别误会，但我是初学者，所以我的代码可能……你知道不好。 :P

Answer 1

对于问题1，我认为this is a solution .我是 Javascript 的新手，所以我能提供的帮助非常有限。

以下是我更改的代码行:

在 HTML 中:

<div class="row" id="requirements">

在 CSS 中:

#requirements {
    display:none;
}

在 JS 中:

document.getElementById("requirements").style.display="block";