打字软件带倒计时_使用VueJS创建打字速度效果-第2部分：计时器和计分板

打字软件带倒计时

Introduction In Part 1 – Create a Typing Speed Effect with VueJS We saw how to create a Typing Speed Effect. We are going to extend what we built previously, and include a timer and a score board, so that users can type and see the times they typed in faster.

简介在第1部分中-使用VueJS创建打字速度效果我们看到了如何创建打字速度效果。 我们将扩展以前构建的内容，包括一个计时器和一个计分板，以便用户可以更快地键入和查看输入时间。

In order to follow along, you must have read through part 1. Logic Since we already have the typing effect covered, we need to do the following.

为了继续学习，您必须已经阅读了第1部分 。 逻辑由于已经涵盖了打字效果，因此我们需要执行以下操作。

1. There should be a 60 second timer that will count down whenever a user is typing.

   应该有一个60秒的计时器，每当用户键入内容时，该计时器就会倒计时。

2. When the time reaches 0 (Zero), the typing area should be blured, and the typing speed calculated.

   时间到达0（零）时，应使打字区域模糊，并计算打字速度。

3. The metrics for calculating the typing speed for a user is Number of correct words typed in a minute + typos.

   计算用户打字速度的指标是每分钟输入的正确字数+错字。

4. We will also give the user the number of typos they made as a single number.

   我们还将为用户提供他们输入的错别字数量。

5. We will then list the leading scores every time a session is ended.

   然后，我们将在每次会话结束时列出领先分数。

The Complete App will look something close to this. Here’s a link to a deployed version: https://ganga.dev/vue-typer/

完整版应用程序看起来与此相似。 这是已部署版本的链接： https : //ganga.dev/vue-typer/

Project Setup Since this is a continuation from part 1, I created a repository that starts at the stage we left part 1 in.

项目设置由于这是第1部分的继续，因此我创建了一个存储库，该存储库从第1部分进入的阶段开始。

Clone this repository. https://github.com/gangachris/vue-typer, and run the existing app.

克隆此存储库。 https://github.com/gangachris/vue-typer ，然后运行现有的应用程序。

The repository has some slight modifications from where we left part 1. We now have a package.json, which installs httpster, and adds a start script to start the app.

该存储库从第1部分开始进行了一些修改。现在，我们有一个package.json，它安装了httpster ，并添加了一个启动脚本来启动该应用程序。

At this point, after running , you should see the following in your browser when you visit .

此时，运行 ，当您访问时，应在浏览器中看到以下内容。

You can type in the text area to see the typing speed and typos effect. We explained how this was achieved in part 1 of this article. Timer UI We’re going to add a digital timer, which is just a countdown. Let’s add some html where the timer will be.

First of all add some styling.

首先添加一些样式。

index.html

index.html

The styles above adds a which will style our timer div.

上面的样式添加了一个 ，它将为我们的计时器div设置样式。

Next, let’s add in the relevant html for the timer.

接下来，让我们为计时器添加相关的html。

index.html

index.html

We’ve added a below the that has the paragraph and the typing effect. We’ve also added the the class that we added earlier: . Refreshing the page should on the browser show this.

我们添加了一个下面具有段落和打字的效果。 我们还添加了之前添加的类： 。 刷新页面应在浏览器上显示出来。

1. When a user starts typing, the timer will start counting down.

   当用户开始打字时，计时器将开始倒计时。

2. The timer and the text area should be reset when countdown ends.

   倒计时结束时，应重置计时器和文本区域。

倒计时器 ( Countdown Timer )

Let’s add the countdown logic.

让我们添加倒数逻辑。

We’ll start by adding a state variable called .

我们将从添加一个名为的状态变量开始。

script.js

script.js