我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打字机效果插件等。那么,实现类似的打字机效果困难吗?其实要制作一个打字机效果非常简单,下面我们就以纯JavaScript来实现一个炫酷的打字机效果。
在完成这个打字机效果之前,让我们先来体验一下打字机的效果:
开始打印
制作打字机效果
上面的效果是如何工作的呢?让我们来一步步的分析。
首先我们需要一个显示打字效果的容器:
id为teletype的元素用于显示要打印的文字。开始是它带有一个hidden属性,用于阻止文字在开始时就显示出来。
另外还需要一个输入框和一个按钮,让我们可以输入要打印的文字,完整的HTML结构如下:
开始打印
接下来,我们定义一个光标元素,它用于模拟打字时闪烁的光标效果:
var cursor = "|";
然后将光标元素插入到span#teletype节点中。
var teletype = document.getElementById("teletype");
teletype.innerHTML = cursor;
开始打印文字时,将span#teletype元素的hidden属性去掉。
t