反应简单的打字机 - Javascript (1)

📌 相关文章

📜 反应简单的打字机 - Javascript (1)

📅 最后修改于: 2023-12-03 15:22:53.899000 🧑 作者: Mango

反应简单的打字机 - Javascript

简介

这个程序是一个反应简单的打字机，使用Javascript编写。它可以计算你的打字速度和准确率，并显示你的每分钟打字数及错误率。

功能

记录输入的时间和输入的内容，计算打字速度和准确率；
显示每分钟打字数和错误率；
支持错误提示。

使用方法

在HTML文件中导入typing.js文件；
```
<script src="typing.js"></script>
```

在HTML页面中插入一个容器，供输入框和反馈信息使用：

<div id="typing-container">
    <textarea id="typing-input"></textarea>
    <div id="typing-feedback"></div>
</div>

初始化打字机实例并启动：

// 初始化
var typing = new Typing({
    inputId: 'typing-input', // 输入框ID
    feedbackId: 'typing-feedback', // 反馈信息容器ID
    text: 'Hello World!', // 打字内容
    resetOnComplete: true, // 是否完成后自动清空内容
    onTypingComplete: function(results) { // 输入完成回调函数
        alert('您的打字速度是 ' + results.speed + ' 字/分。\n 错误率为 ' + results.errorRate + '%');
    }
});

// 启动
typing.start();

API

Typing(options)

构造函数。options参数包括：

inputId：输入框ID；
feedbackId：反馈信息容器ID；
text：打字内容；
resetOnComplete：是否完成后自动清空内容；
onTypingComplete：输入完成时的回调函数。

start()

启动打字机。

stop()

停止打字机。

reset()

重置打字机。

示例

一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>反应简单的打字机</title>
  <style>
    #typing-container {
      width: 400px;
      margin: 0 auto;
      font-size: 18px;
    }
    #typing-input {
      width: 100%;
      height: 120px;
      font-size: 16px;
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    #typing-feedback {
      text-align: center;
    }
  </style>
  <script src="typing.js"></script>
</head>
<body>
  <div id="typing-container">
    <textarea id="typing-input"></textarea>
    <div id="typing-feedback"></div>
  </div>
  <script>
    var typing = new Typing({
        inputId: 'typing-input',
        feedbackId: 'typing-feedback',
        text: 'The quick brown fox jumps over the lazy dog.',
        resetOnComplete: true,
        onTypingComplete: function(results) {
            alert('您的打字速度是 ' + results.speed + ' 字/分。\n 错误率为 ' + results.errorRate + '%');
        }
    });
    typing.start();
  </script>
</body>
</html>

结束语

反应简单的打字机是一个小巧实用的打字练习工具，可以提高你的打字速度和准确率。