如何让我的网站更有效率？答案

【问题标题】：How can I make my website more efficient?如何让我的网站更有效率？
【发布时间】：2021-04-28 04:17:51
【问题描述】：

我的网站上有一个 JavaScript 文件，其中包含每个单词并单独突出显示它们。有没有办法让它变成一行而不是所有单独的？

JavaScript：

var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("bocho").click();
}
});

var element = document.querySelector("#boch");

var start;
element.onkeyup = function () {
var value = element.value;

if (value === "m") {
start = Date.now();
}


if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = "red";
}

if (value.includes("man become")) {
document.getElementById('word-2').style.backgroundColor = 'green';
} else {
document.getElementById('word-2').style.backgroundColor = "red";
}

if (value.includes("man become as")) {
document.getElementById('word-3').style.backgroundColor = 'green';
} else {
document.getElementById('word-3').style.backgroundColor = "red";
}

if (value.includes("man become as and")) {
document.getElementById('word-4').style.backgroundColor = 'green';
} else {
document.getElementById('word-4').style.backgroundColor = "red";
}

if (value.includes("man become as and through")) {
document.getElementById('word-5').style.backgroundColor = 'green';
} else {
document.getElementById('word-5').style.backgroundColor = "red";
}

if (value.includes("man become as and through find")) {
document.getElementById('word-6').style.backgroundColor = 'green';
} else {
document.getElementById('word-6').style.backgroundColor = "red";
}

if (value.includes("man become as and through find would")) {
document.getElementById('word-7').style.backgroundColor = 'green';
} else {
document.getElementById('word-7').style.backgroundColor = "red";
}

if (value.includes("man become as and through find would here")) {
document.getElementById('word-8').style.backgroundColor = 'green';
} else {
document.getElementById('word-8').style.backgroundColor = "red";
}

if (value.includes("man become as and through find would here and")) {
document.getElementById('word-9').style.backgroundColor = 'green';
} else {
document.getElementById('word-9').style.backgroundColor = "red";
}

if (value.includes("man become as and through find would here and before")) {
document.getElementById('word-10').style.backgroundColor = 'green';
} else {
document.getElementById('word-10').style.backgroundColor = "red";
}
var end;
if (value === "man become as and through find would here and before") {
end = Date.now();
}
let millis = end - start;
if (isNaN(millis)) {
  return " ";
}
console.log(millis)

var seconds = millis / 1000;
var min = seconds / 60;

var wpm1 = ((52/5)/min)
console.log(wpm1)
var wpm = Math.round(wpm1);
console.log(wpm)
document.getElementById("bd").innerHTML = wpm;
}

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<h1>
   <span id="word-1">man</span> <span id="word-2">become</span> <span id="word-3">as</span>
   <span id="word-4">and</span> <span id="word-5">through</span> <span id="word-6">find</span> <span id="word-7">would</span> <span id="word-8">here</span> <span id="word-9">and</span> <span id="word-10">before</span>
</h1>

<input type="text" id="boch" autocomplete="off" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false">

        </div>
        <div id="typing-area">

      <button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>

</html>

<h1 id="bd">WPM</h1>



<script src="main.js"></script>

【问题讨论】：

标签： javascript html highlight

【解决方案1】：

对于这个解决方案，我只使用了两个跨度，一个用于绿色部分，一个用于红色文本。然后我循环遍历用户输入的文本并找到文本出错的点。然后我将答案中的所有文本移动到该点到绿色跨度中，其余的留在红色跨度中（这就是切片的作用）。这是工作示例：

HTML：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
</head>

<h1></h1><span id="span1" style="background-color: green;"></span><span id="span2" style="background-color: red;">man become as and through find would here and before</span></h1>
<br>
<input type="text" id="boch" >

<script src="js.js"></script>
</html>

JavaScript

var element = document.querySelector("#boch");

var span1 = document.getElementById("span1");
var span2 = document.getElementById("span2");

element.onkeyup = function () {
    var value = element.value;

    var text = span1.innerText + span2.innerText;

    if (value === text) {
        span2.innerText = "";
        span1.innerText = text;
    } else {
        for (var i = 0; i < value.length; i++) {
            if (text.charAt(i) !== value.charAt(i)) {
                break;
            }
        }

        span1.innerText = text.slice(0, i);
        span2.innerText = text.slice(i, text.length);
    }
};

或者你可以在这里看到它：https://jsfiddle.net/8des04y5/

【讨论】：

对不起，回复晚了，但我尝试将 wpm 计数器代码添加到 js 中，但整个事情停止了工作。
如果你告诉我当它停止工作时你去了哪里，我可以帮你修复它。
Nvm 我修好了。 repl.it 有问题。谢谢！

【解决方案2】：

我想说第一个技巧是将您在多个地方使用的代码块存储在变量中。这是 DRY 原则，不要重复。比如：

if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = "red";
}

并使用此变量替换相同的代码：

const word1 = document.getElementById('word-1');

 if (value.includes("man")) {
    word1.style.backgroundColor = 'green';
    } else {
    word1.style.backgroundColor = "red";
    }

对您将多次使用的每个代码执行此操作。这当然只是一个例子，你可以做得更好，因为你有很多重复的代码。

【讨论】：