首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用Javascript、html或css向网站添加每分钟单词计算器?

如何使用Javascript、html或css向网站添加每分钟单词计算器?
EN

Stack Overflow用户
提问于 2021-01-23 07:53:45
回答 2查看 148关注 0票数 0

一段时间以来,我一直在尝试完成一个打字测试网站,我被困在如何添加每分钟一个单词的计数器上。我尝试了多种方法,但都不起作用。我想要它做的是在用户输入正确的提示后每分钟给出单词。代码如下:

HTML:

代码语言:javascript
运行
复制
<!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">

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

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

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

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");

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

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

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

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

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

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

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

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

  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 = 'transparent';
  }

  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 = 'transparent';
  }

  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 = 'transparent';
  }

 

}
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
  tagArr[i].autocomplete = 'off';
}

谢谢你的帮助!

Irfan

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-23 08:56:46

当第一次按下某个键时,您可以尝试将当前时间戳存储在变量中。然后,当用户完成时,获取当前时间戳与开始时存储的时间戳之间的差值。接下来,您必须计算经过的时间,并将其转换为每分钟的字数。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

为了避免多个if-else结构,可以用空格拆分字符串,然后在for循环中逐字比较。

代码语言:javascript
运行
复制
const string = "man become as and through find would here and before";

var text = document.getElementById("text");
var input = document.getElementById("input");

var start = null;
var finished = false;

// Split the string to an array of words
var words = string.split(" ");

text.innerHTML = "";
// For each word, add it as a span element in the text
words.forEach(w => {
    let el = document.createElement("span");
    el.innerText = w;
    text.appendChild(el);
    text.innerHTML += " ";
});

input.addEventListener("keyup", () => {
    // Split the input to an array of words
    let input_words = input.value.split(" ");
    let good = true;

    if (finished)
        return;
    if (!start)
        start = Date.now();

    // Iterate over all the words
    for (let i = 0; i < words.length; i++) {
        let element = words[i];
        // If the word is not the same as the word at same position in the input, set 'good' at false
        if (input_words[i] != element)
            good = false;
        // Set the background color for the word, selecting the element
        // by the parent's children index (corresponding to i) to avoid the usage of ids
        text.children[i].style.backgroundColor = good ? "green" : null;
    }
    // If all words are correct, the variable is still true
    if (good)
    {
        finished = true;
        // Get the difference in seonds between start and now
        let elapsed = (Date.now() - start) / 1000;
        // Get words per seconde
        let words_per_seconde = words.length * 60 / elapsed;
        // Round to the fourth decimal
        words_per_seconde = Math.round(words_per_seconde * 1000) / 1000;
        alert(words_per_seconde + " words per minute.");
    }
});
代码语言:javascript
运行
复制
<h1 id="text"></h1>
<input type="text" autocomplete="off" id="input"/>

票数 0
EN

Stack Overflow用户

发布于 2021-01-23 09:07:43

考虑下面的例子。

代码语言:javascript
运行
复制
$(function() {
  var start, end, elapsed;

  function split(str) {
    return str.split(" ");
  }

  function compWords(a, b) {
    $.each(a, function(i, w) {
      console.log(w, b.eq(i).text());
      if (w == b.eq(i).text()) {
        $(".word").eq(i).removeClass("incorrect").addClass("correct");
      } else {
        $(".word").eq(i).removeClass("correct").addClass("incorrect");
      }
    });
  }

  function showTime(ms) {
    var minutes = Math.floor(ms / 60000);
    var seconds = ((ms % 60000) / 1000).toFixed(0);
    var result = minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    var wordLength = $(".word").length
    alert(result + " to type " + wordLength + " words. " + $(".word.correct").length + " correct. " + Math.round(wordLength * 60 / seconds) + " WPM");
  }

  $("#boch").keydown(function(e) {
    if ($(this).val().length == 1) {
      start = Date.now();
      $(".word").removeClass("correct incorrect");
    }
  }).keyup(function(e) {
    var typed = $(this).val();
    compWords(split(typed), $(".word"));
  });

  $("#bocho").click(function() {
    if (start != undefined) {
      end = Date.now();
      elapsed = end - start;
      showTime(elapsed);
    }
  });

  $("#typing-area form").submit(function(e) {
    e.preventDefault();
    $("#bocho").click();
  });
});
代码语言:javascript
运行
复制
.word {
  padding: .025em;
}

.word.correct {
  background-color: #cfc;
}

.word.incorrect {
  background-color: #fcc;
}
代码语言:javascript
运行
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  <span class="word">man</span> <span class="word">become</span> <span class="word">as</span>
  <span class="word">and</span> <span class="word">through</span> <span class="word">find</span> <span class="word">would</span> <span class="word">here</span> <span class="word">and</span> <span class="word">before</span>
</h1>
<div id="typing-area">
  <form>
    <input type="text" id="boch" autocomplete="off" />
    <button id="bocho">Enter</button>
  </form>
</div>

这需要类似的代码,并向您展示如何计算用户键入单词所需的时间。它不会计算WPM,因为单词太少了。你可以考虑外推这个比率。字数* 60 /秒。

此答案使用jQuery。如果你愿意,你也可以使用JavaScript来做这件事。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65854300

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档