我们在看电影时经常能够看到一些炫酷的打字机效果，用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果，目前网上已经有很多打字机效果的插件，如轻量级响应式jQuery打字机特效插件和逼真的js打字机效果插件等。那么，实现类似的打字机效果困难吗？其实要制作一个打字机效果非常简单，下面我们就以纯JavaScript来实现一个炫酷的打字机效果。

在完成这个打字机效果之前，让我们先来体验一下打字机的效果：

开始打印

制作打字机效果

上面的效果是如何工作的呢？让我们来一步步的分析。

首先我们需要一个显示打字效果的容器：

id为teletype的元素用于显示要打印的文字。开始是它带有一个hidden属性，用于阻止文字在开始时就显示出来。

另外还需要一个输入框和一个按钮，让我们可以输入要打印的文字，完整的HTML结构如下：

接下来，我们定义一个光标元素，它用于模拟打字时闪烁的光标效果：

var cursor = "|";

然后将光标元素插入到span#teletype节点中。

var teletype = document.getElementById("teletype");

teletype.innerHTML = cursor;

开始打印文字时，将span#teletype元素的hidden属性去掉。

teletype.removeAttribute("hidden");

然后通过一个计时器不断的刷新span#teletype元素中的内容，通过一个counter计数器来不断累加要显示的文字，模拟出打字的效果。

var teletype = document.getElementById("teletype");

var input = document.querySelector(".u-input");

var telecopy = input.value;

var timer = setInterval(function(){

teletype.innerHTML = telecopy.substr(0, counter) + cursor;

counter++;

if(counter === telecopy.length + 1) {

clearInterval(timer);

}

}, 100);

完整的js代码应该类似下面的样子：

(function(){

var btn = document.getElementById("btn-ctrl");

function typeIt() {

var cursor = "|";

var teletype = document.getElementById("teletype");

var input = document.querySelector(".u-input");

var telecopy = input.value;

var counter = 0;

teletype.innerHTML = cursor;

teletype.removeAttribute("hidden");

var timer = setInterval(function(){

teletype.innerHTML = telecopy.substr(0, counter) + cursor;

counter++;

if(counter === telecopy.length + 1) {

clearInterval(timer);

}

}, 100);

}

btn.onclick = function(){

typeIt();

}

})();

增加光标闪烁效果

在文字打印过程中和打印结束后，光标应该有一种不停闪烁的效果。这种光标闪烁效果可以使用CSS3的animation动画来完成。

@keyframes blink {

from, to {

color: transparent;

}

50% {

color: black;

}

}

在光标元素调用这个动画。

#teletype span {

animation: blink 1s step-end infinite;

}

到这里，一个最简单的JavaScript打字机效果就完成了！