Question

我在纯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代码为他提供所有计算要求。

正如你所看到它有效，但我想解决的问题很少，但我缺乏知识对我没有帮助。：P

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

问题＃2 - 按钮重置会清除输入，但不会清除需求表中的结果，我该如何使其生效？

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

问题＃4 - 正如你所看到的，我重复了一些代码，因为spearman和剑士代码非常相似。你知道我怎么能减少重复吗？

好的，这就是我想问你们的所有事情。希望有人可以帮助我。不要错，但我是初学程序员，所以我的代码可以......你知道不好。：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";

JS中的简单计算器

1 个答案: