当前位置：首页 > VUE

用vue实现打字测速

2026-02-24 01:39:13VUE

实现思路

使用Vue实现打字测速需要构建一个包含随机文本生成、用户输入比对、计时和速度计算的核心功能模块。以下是具体实现方法。

创建Vue项目

通过Vue CLI或Vite初始化项目：

用vue实现打字测速

npm init vue@latest typing-speed-test
cd typing-speed-test
npm install

核心组件结构

在src/components下创建TypingTest.vue文件：

用vue实现打字测速

<template>
  <div class="typing-test">
    <h3>打字速度测试</h3>
    <div class="text-display">
      <span 
        v-for="(char, index) in textToType" 
        :key="index"
        :class="{
          'correct': index < currentPosition && userInput[index] === textToType[index],
          'incorrect': index < currentPosition && userInput[index] !== textToType[index],
          'current': index === currentPosition
        }"
      >
        {{ char }}
      </span>
    </div>
    <input 
      v-model="userInput" 
      @input="checkInput"
      :disabled="!isTestActive"
      placeholder="开始输入..."
    />
    <div v-if="showResults" class="results">
      <p>速度: {{ wpm }} WPM ({{ cpm }} CPM)</p>
      <p>准确率: {{ accuracy }}%</p>
      <button @click="resetTest">重新测试</button>
    </div>
  </div>
</template>

逻辑实现

在<script>部分添加核心逻辑：

export default {
  data() {
    return {
      textToType: '',
      userInput: '',
      currentPosition: 0,
      startTime: null,
      endTime: null,
      isTestActive: false,
      showResults: false,
      wpm: 0,
      cpm: 0,
      accuracy: 0,
      sampleTexts: [
        "The quick brown fox jumps over the lazy dog",
        "Vue is a progressive framework for building user interfaces",
        "JavaScript is the programming language of the Web"
      ]
    }
  },
  mounted() {
    this.generateRandomText();
  },
  methods: {
    generateRandomText() {
      const randomIndex = Math.floor(Math.random() * this.sampleTexts.length);
      this.textToType = this.sampleTexts[randomIndex];
    },
    checkInput() {
      if (!this.isTestActive && this.userInput.length === 1) {
        this.startTest();
      }

      this.currentPosition = this.userInput.length;

      if (this.userInput === this.textToType) {
        this.endTest();
      }
    },
    startTest() {
      this.startTime = new Date();
      this.isTestActive = true;
    },
    endTest() {
      this.endTime = new Date();
      this.isTestActive = false;
      this.calculateResults();
      this.showResults = true;
    },
    calculateResults() {
      const timeInMinutes = (this.endTime - this.startTime) / 60000;
      const correctChars = [...this.userInput].filter((char, i) => 
        char === this.textToType[i]
      ).length;

      this.cpm = Math.round(correctChars / timeInMinutes);
      this.wpm = Math.round(this.cpm / 5);
      this.accuracy = Math.round((correctChars / this.textToType.length) * 100);
    },
    resetTest() {
      this.userInput = '';
      this.currentPosition = 0;
      this.showResults = false;
      this.generateRandomText();
    }
  }
}

样式设计

在<style>部分添加基础样式：

.typing-test {
  max-width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.text-display {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 20px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  min-height: 100px;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}

.current {
  background-color: #e0e0e0;
}

input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.results {
  margin-top: 20px;
  padding: 15px;
  background: #f0f8ff;
  border-radius: 4px;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}