用码道 AI 编程助手写一个打字速度测试工具

一行命令，码道帮我写出了一个功能完整的打字速度测试器——实时 WPM、准确率、60秒倒计时、高亮反馈，全在一个 HTML 里

分类: ai-development
标签: CodeArts, AI编程, 打字测试, 工具
难度: 初级
读者: 前端开发者、技术爱好者

1. 开篇钩子

不用写一行 JavaScript，不用设计 UI 样式，不用纠结算法逻辑——我在码道 TUI 里输入了一段需求描述，30 秒后一个功能完整的打字速度测试器就自动生成了。实时 WPM 统计、准确率追踪、60 秒倒计时、高亮反馈，一应俱全。

2. 码道 TUI 安装

复制下面的命令到终端，3 步完成安装：

# 1. 一键安装
sh -c "$(curl -L https://cnnorth4-cloudide-marketplace.obs.cn-north-4.myhuaweicloud.com/codearts/cli_tui/install_script/install.sh)"

# 2. 配置环境变量
export PATH=~/.codeartsdoer/installers:$PATH
export CODEARTS_CLI_AK=你的AK
export CODEARTS_CLI_SK=你的SK

# 3. 启动 TUI
codearts

AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth

👉 还没有码道？立即开通体验：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

3. 码道能力一览

这次开发中，码道展示了以下能力：

• 自然语言编程：我说"打字速度测试器"，码道直接理解意图并生成了完整实现
• 自主 UI 设计：码道自动选择了深色主题 + 渐变配色，从 CSS 变量到动画过渡一气呵成
• 完整交互逻辑：码道实现了键盘事件监听、实时统计、倒计时、结果弹窗全流程
• 响应式适配：自动适配手机屏幕，Media Query 调整字体和间距

4. 任务描述

我想要一个打字速度测试工具，具体要求：

• 随机显示英文文章供用户打字
• 实时计算 WPM（每分钟字数）和准确率
• 60 秒倒计时，进度条显示剩余时间
• 正确输入绿色高亮，错误输入红色下划线
• 打字开始自动启动计时器
• 时间到弹出结果窗口（WPM、准确率、正确字符数）
• 深色主题、响应式设计

开发命令：

# 打开码道 TUI，在输入框中输入需求
codearts

5. 开发过程

步骤 1：打开码道 TUI 输入需求

在终端输入 codearts，码道的交互式 TUI 界面自动启动，在输入框中粘贴需求描述：

步骤 2：码道开始生成

输入需求后，码道识别需求并开始开发。终端标题变为"打字速度测试页面"：

码道自动选择了纯前端方案，创建一个单 HTML 文件包含全部 CSS 和 JavaScript。

步骤 3：码道完成全部功能

码道自动创建了 typing-speed-test.html 文件，367 行完整代码一次性生成：

生成的文件包含：

• 10 段预置英文文章随机切换
• 实时 WPM 和准确率统计
• 60 秒倒计时 + 进度条
• 逐字符高亮（正确绿色、错误红色、当前字符闪烁光标）
• 全屏结果弹窗（WPM、准确率、字符数）
• 深色渐变主题 + 响应式布局
• Tab + Enter 快捷键重置

步骤 4：最终效果

用浏览器打开生成的文件，效果如下：

页面顶部显示 Typing Speed Test 标题，三个统计卡片（Time/WPM/Accuracy），进度条显示剩余时间，输入框支持任意键开始打字，逐字符实时反馈。

6. 代码解析

逐字符渲染与高亮

function renderText() {
  textBox.innerHTML = '';
  for (let i = 0; i < currentPassage.length; i++) {
    const span = document.createElement('span');
    span.classList.add('char');
    span.textContent = currentPassage[i];
    if (i < charIndex) {
      span.classList.add(hiddenInput.value[i] === currentPassage[i] ? 'correct' : 'wrong');
    } else if (i === charIndex) {
      span.classList.add('current', 'pending');
    } else {
      span.classList.add('pending');
    }
    textBox.appendChild(span);
  }
}

码道将文章的每个字符渲染为独立 <span>，通过 charIndex 精确控制三种状态：已输入（正确/错误）、当前（闪烁光标）、未输入。每输入一个字符立即重新渲染，实现实时高亮反馈。

WPM 实时计算

function updateStats() {
  const elapsed = 60 - timeLeft;
  const wpm = elapsed > 0 ? Math.round((correctCount / 5) / (elapsed / 60)) : 0;
  const total = correctCount + wrongCount;
  const acc = total > 0 ? Math.round((correctCount / total) * 100) : 100;
  wpmEl.textContent = wpm;
  accuracyEl.textContent = acc + '%';
  progressEl.style.width = (timeLeft / 60 * 100) + '%';
}

码道用标准 WPM 算法：正确输入的字符数 ÷ 5（一个单词平均5个字符）÷ 已用分钟数。准确率用正确字符 ÷ 总输入字符。进度条宽度实时映射剩余时间。

7. 运行效果

打开 typing-speed-test.html，可以看到：

• 深色渐变主题，文字清晰明亮
• 三栏数据卡片：倒计时（红色）、WPM（紫色）、准确率（绿色）
• 进度条动态指示剩余时间
• 10 段不同英文文章随机切换
• 逐字符高亮：正确绿色、错误红色+下划线、当前字符闪烁光标
• 时间到弹出结果窗口（最终 WPM、准确率、正确字符数）
• Tab 重置 + Enter（结束后）重新开始快捷键
• 手机端自动适配，卡片和字体缩小

8. 能力总结

9. 开通码道

码道 (CodeArts) 是华为云推出的 AI 编程助手：

• 👉 立即开通：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
• 👉 AK/SK 获取：https://codearts.huaweicloud.com/portal/settings/cli-auth
• 👉 安装指南：https://bbs.huaweicloud.com/blogs/482630

10. 总结

今天我用一行自然语言命令，让码道 AI 编程助手生成了一个完整的打字速度测试工具。从 UI 设计、交互逻辑、实时统计到响应式适配，全部由 AI 自动完成。如果你也想体验"描述需求比写代码更快"，现在就开通码道试试。