当前位置：首页 > VUE

vue实现打字练习功能

2026-01-21 05:59:23VUE

实现思路

在Vue中实现打字练习功能，核心在于动态渲染文本、监听用户输入、匹配输入内容以及计算打字速度和准确率。主要分为文本展示、输入匹配、计时统计三个模块。

vue实现打字练习功能

核心代码实现

模板部分

<template>
  <div class="typing-practice">
    <div class="text-display">
      <span 
        v-for="(char, index) in textChars" 
        :key="index"
        :class="{
          'correct': index < currentIndex && char === inputChars[index],
          'wrong': index < currentIndex && char !== inputChars[index],
          'current': index === currentIndex
        }"
      >
        {{ char }}
      </span>
    </div>
    <input 
      v-model="userInput" 
      @input="handleInput"
      @keydown.delete="handleBackspace"
      placeholder="开始打字..."
    />
    <div class="stats">
      <p>速度: {{ wpm }} WPM</p>
      <p>准确率: {{ accuracy }}%</p>
      <p>用时: {{ elapsedTime }}秒</p>
    </div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      practiceText: 'The quick brown fox jumps over the lazy dog',
      userInput: '',
      currentIndex: 0,
      startTime: null,
      elapsedTime: 0,
      correctCount: 0,
      timer: null
    }
  },
  computed: {
    textChars() {
      return this.practiceText.split('')
    },
    inputChars() {
      return this.userInput.split('')
    },
    wpm() {
      const minutes = this.elapsedTime / 60
      return minutes > 0 
        ? Math.round((this.correctCount / 5) / minutes) 
        : 0
    },
    accuracy() {
      return this.currentIndex > 0
        ? Math.round((this.correctCount / this.currentIndex) * 100)
        : 0
    }
  },
  methods: {
    handleInput() {
      if (!this.startTime) {
        this.startTime = new Date()
        this.startTimer()
      }

      const inputLength = this.userInput.length
      if (inputLength > this.practiceText.length) {
        this.userInput = this.userInput.slice(0, this.practiceText.length)
        return
      }

      this.currentIndex = inputLength
      if (this.textChars[inputLength - 1] === this.inputChars[inputLength - 1]) {
        this.correctCount++
      }
    },
    handleBackspace(e) {
      if (this.userInput.length === 0) {
        e.preventDefault()
      }
    },
    startTimer() {
      this.timer = setInterval(() => {
        this.elapsedTime = Math.floor((new Date() - this.startTime) / 1000)
      }, 1000)
    }
  },
  beforeUnmount() {
    clearInterval(this.timer)
  }
}
</script>

样式部分

<style scoped>
.typing-practice {
  font-family: monospace;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.text-display {
  font-size: 24px;
  margin-bottom: 20px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.correct {
  color: green;
}

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

.current {
  background-color: #eee;
  border-left: 2px solid #333;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    border-left-color: transparent;
  }
}

input {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  font-family: monospace;
}

.stats {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
</style>