当前位置：首页 > VUE

用vue实现打字测速

2026-01-23 11:02:35VUE

实现思路

使用Vue构建一个打字速度测试应用，核心功能包括计时、计算打字速度（字符/分钟或单词/分钟）以及准确率统计。需监听用户输入并与目标文本比对。

核心代码实现

模板部分

<template>
  <div class="typing-test">
    <h3>目标文本</h3>
    <div class="target-text">{{ targetText }}</div>

    <h3>你的输入</h3>
    <textarea 
      v-model="userInput" 
      @input="checkInput"
      :disabled="isCompleted"
    ></textarea>

    <div v-if="startTime">
      <p>用时: {{ elapsedTime }}秒</p>
      <p>速度: {{ typingSpeed }} CPM (字符/分钟)</p>
      <p>准确率: {{ accuracy }}%</p>
    </div>

    <button v-if="isCompleted" @click="resetTest">重新测试</button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      targetText: 'The quick brown fox jumps over the lazy dog',
      userInput: '',
      startTime: null,
      endTime: null,
      isCompleted: false
    }
  },
  computed: {
    elapsedTime() {
      if (!this.startTime) return 0;
      const end = this.endTime || Date.now();
      return ((end - this.startTime) / 1000).toFixed(2);
    },
    typingSpeed() {
      if (!this.startTime) return 0;
      const minutes = this.elapsedTime / 60;
      return Math.round(this.userInput.length / minutes);
    },
    accuracy() {
      let correctChars = 0;
      for (let i = 0; i < this.userInput.length; i++) {
        if (this.userInput[i] === this.targetText[i]) {
          correctChars++;
        }
      }
      return ((correctChars / this.userInput.length) * 100).toFixed(2);
    }
  },
  methods: {
    checkInput() {
      if (!this.startTime) {
        this.startTime = Date.now();
      }

      if (this.userInput === this.targetText) {
        this.endTime = Date.now();
        this.isCompleted = true;
      }
    },
    resetTest() {
      this.userInput = '';
      this.startTime = null;
      this.endTime = null;
      this.isCompleted = false;
    }
  }
}
</script>

样式优化

<style scoped>
.typing-test {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.target-text {
  background: #f5f5f5;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  resize: none;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>