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

Question

I have a JavaScript file on my website that takes each word and highlights them individually.我的网站上有一个 JavaScript 文件，其中包含每个单词并单独突出显示它们。 Is there a way to make it into one line instead of all of the individual ones?有没有办法让它变成一条线而不是所有单独的线？

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: 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>

Answer 1

I would say that the first tip is to store your code blocks, which you are using in multiple places, in variables.我想说第一个技巧是将您在多个地方使用的代码块存储在变量中。 This is the DRY principle, don't repeat yourself.这是 DRY 原则，不要重复。 like for example:例如：

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

and use this variable to replace the same code:并使用此变量替换相同的代码：

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

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

Do this for every code that you will use multiple time.对您将多次使用的每个代码执行此操作。 This of course is just an example, you can do it even better, because you have much code that is repeating.这当然只是一个例子，你可以做得更好，因为你有很多重复的代码。

Answer 2

For this solution I use only two spans, one for the green portion and one for the red text.对于这个解决方案，我只使用了两个跨度，一个用于绿色部分，一个用于红色文本。 I then loop through the text inputted by the use and find the point at which the text becomes wrong.然后我循环遍历用户输入的文本并找到文本出错的点。 I then move all the the text in the answer up to that point into the green span and the rest is left in the red span(this is what the slicing does).然后我将答案中的所有文本移动到该点到绿色范围内，rest 留在红色范围内（这就是切片的作用）。 Here is the working example:这是工作示例：

HTML: 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 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);
    }
};

Or you can see it working here: https://jsfiddle.net/8des04y5/或者你可以看到它在这里工作： https://jsfiddle.net/8des04y5/

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

问题描述

2 个解决方案

解决方案1
0 2021-01-24 13:55:21

解决方案2
0 已采纳 2021-01-24 18:34:05

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

问题描述

2 个解决方案

解决方案1 0 2021-01-24 13:55:21

解决方案2 0 已采纳 2021-01-24 18:34:05

解决方案1
0 2021-01-24 13:55:21

解决方案2
0 已采纳 2021-01-24 18:34:05