JS中的简单计算器

我用纯JS创建了一个简单的Web应用程序，通常我遇到了一些我不知道如何解决的问题。首先，您可以在这里看到我的演示工具：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代码为他提供所有计算要求。

如您所见，它可以工作，但是我想修复的bug很少，但是我的知识不足无济于事。：P

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

问题2-“重置”按钮清除输入，但不清除需求表中的结果，我该如何使其工作？

问题＃3-我没有添加时间，这很可能是字符串错误，但我不知道如何解决。

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

好的，这就是我要问你们的全部。希望有人可以帮助我。没错，但是我是个初学者，所以我的代码可以是……你知道不好。：P