[英]How can I make my website more efficient?
我的網站上有一個 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>
我想說第一個技巧是將您在多個地方使用的代碼塊存儲在變量中。 這是 DRY 原則,不要重復。 例如:
if (value.includes("man")) {
document.getElementById('word-1').style.backgroundColor = 'green';
} else {
document.getElementById('word-1').style.backgroundColor = "red";
}
並使用此變量替換相同的代碼:
常量 word1 = document.getElementById('word-1');
if (value.includes("man")) {
word1.style.backgroundColor = 'green';
} else {
word1.style.backgroundColor = "red";
}
對您將多次使用的每個代碼執行此操作。 這當然只是一個例子,你可以做得更好,因為你有很多重復的代碼。
對於這個解決方案,我只使用了兩個跨度,一個用於綠色部分,一個用於紅色文本。 然后我循環遍歷用戶輸入的文本並找到文本出錯的點。 然后我將答案中的所有文本移動到該點到綠色范圍內,rest 留在紅色范圍內(這就是切片的作用)。 這是工作示例:
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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.