javascript - 优化代码以将数字 1 - 25 统一映射到 5 种颜色

Question

我目前正在学习 JavaScript，我编写了这段代码(并且运行良好)，但我知道必须有一种方法可以更好地实现自动化。我对循环有点模糊，但据我所知，我不知道在这种情况下可以使用循环:

function calculation() {

var num = document.getElementById("input").value;
var trCalc = num % 25;

var tipColorName = document.getElementById("tipColorName");
var ringColorName = document.getElementById("ringColorName");

var tipBlock = document.getElementById("tipBlock");
var ringBlock = document.getElementById("ringBlock");

// Pair Calculations

if (trCalc > 0 && trCalc <= 5) {
    tipColorName.innerHTML = "White";
    tipBlock.setAttribute("style", "background-color: #f2f2f2; color: #2f2f2f;");
}
if (trCalc > 5 && trCalc <= 10) {
    tipColorName.innerHTML = "Red";
    tipBlock.setAttribute("style", "background-color: #e24341; color: white;");
}
if (trCalc > 10 && trCalc <= 15) {
    tipColorName.innerHTML = "Black";
    tipBlock.setAttribute("style", "background-color: #2f2f2f; color: white;");
}
if (trCalc > 15 && trCalc <= 20) {
    tipColorName.innerHTML = "Yellow";
    tipBlock.setAttribute("style", "background-color: #f4ca37; color: #2f2f2f;");
}
if (trCalc > 20 && trCalc <= 24 || num % 25 == 0 && num > 0 ) {
    tipColorName.innerHTML = "Violet";
    tipBlock.setAttribute("style", "background-color: #844ae0; color: white;");
}
if ([1, 6, 11, 16, 21].includes(trCalc)) {
    ringColorName.innerHTML = "Blue";
    ringBlock.setAttribute("style", "background-color: #426ffe; color: white;");
}
if ([2, 7, 12, 17, 22].includes(trCalc)) {
    ringColorName.innerHTML = "Orange";
    ringBlock.setAttribute("style", "background-color: #f27f42; color: #2f2f2f;");
}
if ([3, 8, 13, 18, 23].includes(trCalc)) {
    ringColorName.innerHTML = "Green";
    ringBlock.setAttribute("style", "background-color: #25d366; color: white;");
}
if ([4, 9, 14, 19, 24].includes(trCalc)) {
    ringColorName.innerHTML = "Brown";
    ringBlock.setAttribute("style", "background-color: #917260; color: #2f2f2f;");
}
if ([5, 10, 15, 20 ].includes(trCalc) || num % 25 == 0 && num > 0 ) {
    ringColorName.innerHTML = "Slate";
    ringBlock.setAttribute("style", "background-color: grey; color: #2f2f2f;");
}

感谢任何帮助!

Answer 1

优化和缩小实际上是两个不同的东西。查看此站点以进行缩小 http://closure-compiler.appspot.com/home .

就优化而言，您可以做几件事。

您可以考虑使用一个函数来更改您的样式。这将清理您的代码并使其更具可读性。像这样的东西:

changeStyles(innerColor,bgColor,color){
  ringColorName.innerHTML = innerColor;
  ringBlock.setAttribute("style", "background-color: "+bgColor+"; color: "+color+";") 
}

然后你的 if 语句看起来像这样:

if ([1, 6, 11, 16, 21].includes(trCalc)) {
   changeStyles("White","#f2f2f2","#2f2f2f");
}

您可以查看模运算符。对于最后五个 if 语句，您似乎可以执行 foo = trCalc % 5，然后执行 switch(foo)。可能看起来像这样。

foo = trCalc % 5
switch(foo) {
    case 0:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 1:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 2:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 3:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
    case 4:
        changeStyles("White","#f2f2f2","#2f2f2f");
        break;
}

当然，您可以将适当的颜色插入到函数 changeColors 中。希望这能给您一些想法。