Question

我试图打造打字速度测试计数器。目标是仅在输入正确的字符时才在整个文本中移动闪烁的光标。我无法理解如何浏览文本。然后我将计算所需的分钟数并计算wpm。

＆＃13;

function timer() {
  var seconds = 3;
  var element = document.getElementById('timer');
  var timerId = setInterval(countdown, 1000);

  function countdown() {
    if (seconds == -1) {
      clearTimeout(timerId);
      element.innerHTML = "Time Up";
      var value = 1;
      wpm();
    } else {
      element.innerHTML = "Time Left: " + seconds + " " + "seconds";
      seconds--;
    }
  }
}

＆＃13;

body {
  font-family: monospace;
}

.title-of-page>h1 {
  text-align: center;
  font-family: monospace;
}

.title-of-page {
  background-color: #414a4c;
  color: #ced3db;
}

.jumbotron {
  margin: 0;
}

.navigation-bar {
  background-color: #46494f;
}

a {
  color: green;
}

.nav>li>a:hover {
  background-color: #878f9b;
}

.navbar-nav>li {
  text-align: center;
  float: none;
  display: table-cell;
}

.navbar-nav {
  display: table;
  width: 100%;
  margin: 0;
}

.navbar {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.typing-field {
  width: 60em;
  height: 8em;
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 15em;
  margin-top: 5em;
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 35em;
  padding-top: 2em;
}

#timer {
  padding-top: 4em;
  padding-left: 10em;
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

＆＃13;

<body>
  <div class="jumbotron title-of-page container-fluid">
    <h1>Typing Counter</h1>
  </div>
  <nav class="navbar navigation-bar container-fluid">
    <div class="">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Contest</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leaderboard</a></li>
      </ul>
    </div>
  </nav>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-input">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

＆＃13;

对于javascript，我试图做这样的事情。这大多是错的。我还是个初学者。

window.onload = function wpm() {
  var text = document.getElementById('user-input').innerHTML;
  var i=0;
  document.getElementById('user-input').onkeyup = function() {
    var letter = this.value;
    if(letter==text[i])
    {
      letter.style.color="green";
      i++;
    }
  }
}

Answer 1

以下是我在使用您的代码后最终得到的结果：

var display = document.getElementById('display-text');
var userInput = document.getElementById('user-input');

userInput.onkeyup = function() {
  for (var i = 0; i < userInput.value.length; i++) { // Counts correct letters
    if (display.innerText[i] != userInput.value[i])
      break; // Exit loop if incorrect
  }
  display.innerHTML = '<span style="color: green;">' + display.innerText.substr(0, i) + '</span>' + '<span class="typed-cursor">' + display.innerText.substr(i, 1) + '</span>' + display.innerText.substr(i + 1);
}

body {
  font-family: monospace;
}

.typing-field {
  width: auto;
  /* Modified for snippet */
  height: auto;
  /* Modified for snippet */
  background-color: #7e7e7f;
  opacity: 0.4;
  margin-left: 0;
  /* Modified for snippet */
  margin-top: 0;
  /* Modified for snippet */
  border: 3px solid black;
  padding: 0.8em;
}

#display-text {
  color: white;
  font-size: 2em;
}

.user-input {
  font-size: 1em;
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
}

#timer {
  padding-left: 0;
  /* Modified for snippet */
  padding-top: 0;
  /* Modified for snippet */
  font-size: 1.5em;
  color: red;
}

.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  color: black;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <div>
    <div id="timer">
      <button type="button" class="btn" onclick="timer();">Start</button>
    </div>
    <div class="typing-field">
      <p id="display-text"><span class="typed-cursor">T</span>his is to test your typing speed. So type like you'll never type again.</p>
    </div>
    <div class="user-inputs">
      <input type="text" name="user-input-text-box" id="user-input" />
    </div>
  </div>
</body>

此代码比较显示的字符串和绿色的正确字母，并将闪烁的光标放在要输入的字符上。

我希望它有所帮助。：）

Answer 2

如果要跟踪键入的字母，然后将它们转换为不同的颜色，可以将文本字符串保存在变量中，然后通过它将输入的字母转储到另一个数组中，然后将它们合并到输出字段中： / p>

wp-admin

    Drawable customErrorDrawable = getResources().getDrawable(R.drawable.error_icon);
        customErrorDrawable.setBounds(0, 0, customErrorDrawable.getIntrinsicWidth(), customErrorDrawable.getIntrinsicHeight());


 editText.setError("please enter data",customErrorDrawable);

import pandas as pd
import pytz
s = pd.Series([pd.Timestamp(2018,5,11,6,0,0,0, pytz.timezone('UTC'))])
s

0   2018-05-11 06:00:00+00:00
dtype: datetime64[ns, UTC]

如何遍历文本框中的文本？

2 个答案: