这是我的javascript代码的即时消息,我试图创建一个显示单词数及其用时的函数,但卡住了。我将如何完成这个非常小的简单任务
const testWrapper = document.querySelector(".test-wrapper");
const testArea = document.querySelector("#test-area");
const originText = document.querySelector("#origin-text p").innerHTML;
const resetButton = document.querySelector("#reset");
const theTimer = document.querySelector(".timer");
var timer = [0,0,0,0];
var interval;
var timerRunning = false;
function leadingZero(time) {
if (time <= 9) {
time = "0" + time;
}
return time;
}
//这将是计时器功能...
function runTimer() {
let currentTime = leadingZero(timer[0]) + ":" + leadingZero(timer[1]) + ":" + leadingZero(timer[2]);
theTimer.innerHTML = currentTime;
timer[3]++;
timer[0] = Math.floor((timer[3]/100)/60);
timer[1] = Math.floor((timer[3]/100) - (timer[0] * 60));
timer[2] = Math.floor(timer[3] - (timer[1] * 100) - (timer[0] * 6000));
}
//将输入的文本与页面上提供的文本匹配:
function spellCheck() {
let textEntered = testArea.value;
let originTextMatch = originText.substring(0,textEntered.length);
if (textEntered == originText) {
clearInterval(interval);
testWrapper.style.borderColor = "#429890";
} else {
if (textEntered == originTextMatch) {
testWrapper.style.borderColor = "#65CCf3";
} else {
testWrapper.style.borderColor = "#E95D0F";
}
}
}
//启动计时器:
function start() {
let textEnterdLength = testArea.value.length;
if (textEnterdLength === 0 && !timerRunning) {
timerRunning = true;
interval = setInterval(runTimer, 10);
}
console.log(textEnterdLength);
}
//重设整个打字测试
function reset() {
clearInterval(interval);
interval = null;
timer = [0,0,0,0];
timerRunning = false;
testArea.value = "";
theTimer.innerHTML = "00:00:00";
testWrapper.style.borderColor = "grey";
}
//事件监听器/使用键盘输入和重置的交互功能
testArea.addEventListener("keypress", start, false);
testArea.addEventListener("keyup", spellCheck, false);
resetButton.addEventListener("click", reset, false);