打字测试 - CSS

简介

打字测试是一种评估打字速度和准确性的工具。而CSS（Cascading Style Sheets）是一种用于描述网页上元素样式的语言，能够将网页的布局、字体、颜色、大小等样式进行统一管理，增加网页的美观性和可读性。在Web开发中，CSS是不可或缺的一部分。此文将会介绍由CSS实现的打字测试页面。

页面布局

CSS用于实现页面的布局，而打字测试页面布局分为两列，左侧是打字区域，右侧是用户的输入区域，具体实现如下：

.container {
  width: 1200px;
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.col-6 {
  width: 50%;
  padding: 0 30px;
  box-sizing: border-box;
}

.left {
  margin-bottom: 30px;
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left textarea {
  width: 100%;
  height: 500px;
  padding: 20px;
  border: none;
  outline: none;
  font-size: 24px;
  line-height: 1.5;
}

.right input {
  width: 200px;
  height: 50px;
  padding: 0 20px;
  border: 2px solid #000;
  outline: none;
  font-size: 24px;
  line-height: 1.5;
  border-radius: 5px;
  margin-left: 20px;
}

样式设计

为了让页面更加美观，需要对页面进行样式设计，此处我们采用了以下样式：

1. 彩色打字

在打字区域中，我们使用CSS3的text-shadow属性来给字体添加文字阴影，实现打字区域的彩色效果。

.left textarea {
  color: transparent;
  text-shadow: 0 0 2px #f00, 0 0 4px #ff0, 0 0 6px #0f0, 0 0 8px #00f, 0 0 10px #f0f;
}

2. 打字结果的样式

在右侧的输入区域中，我们需要展示用户输入的打字结果，为此，我们需要设计打字结果的样式，例如打对的文字颜色为绿色，打错的文字颜色为红色。

.right .result {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px;
  padding: 0 20px;
}

.right .right-char {
  color: green;
}

.right .wrong-char {
  color: red;
}

打字测试实现

为了实现打字测试功能，我们需要添加JavaScript代码。具体实现请参照下方代码。

let leftTextarea = document.querySelector('.left textarea');
let rightInput = document.querySelector('.right input');
let result = document.querySelector('.result');
let spans = [];

leftTextarea.addEventListener('input', function(event) {
  let value = this.value;
  for (let i = 0; i < value.length; i++) {
    if (!spans[i]) {
      let span = document.createElement('span');
      spans.push(span);
      this.parentElement.appendChild(span);
    }
    spans[i].innerText = value[i];
  }

  if (value === '') {
    result.innerText = '';
    return;
  }

  let resultValue = '';
  for (let i = 0; i < value.length; i++) {
    if (i >= rightInput.value.length) {
      resultValue += '<span class="wrong-char">' + value[i] + '</span>';
    } else if (value[i] === rightInput.value[i]) {
      resultValue += '<span class="right-char">' + value[i] + '</span>';
    } else {
      resultValue += '<span class="wrong-char">' + value[i] + '</span>';
    }
  }
  result.innerHTML = resultValue;
});

rightInput.addEventListener('input', function(event) {
  let value = this.value.trim();

  if (leftTextarea.value === '') {
    result.innerText = '';
    return;
  }

  let resultValue = '';
  for (let i = 0; i < leftTextarea.value.length; i++) {
    if (i >= value.length) {
      resultValue += '<span class="wrong-char">' + leftTextarea.value[i] + '</span>';
    } else if (leftTextarea.value[i] === value[i]) {
      resultValue += '<span class="right-char">' + leftTextarea.value[i] + '</span>';
    } else {
      resultValue += '<span class="wrong-char">' + leftTextarea.value[i] + '</span>';
    }
  }
  result.innerHTML = resultValue;
});

总结

本文介绍了如何利用CSS实现打字测试页面的布局和样式，并通过JavaScript实现了打字测试功能。通过本文的学习，读者可以掌握如何使用CSS和JavaScript实现一个简单的打字测试页面。