共计 2003 个字符,预计需要花费 6 分钟才能阅读完成。
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如 轻量级响应式 jQuery 打字机特效插件 和逼真的 js 打字机效果插件 等。那么,实现类似的打字机效果困难吗?其实要制作一个打字机效果非常简单,下面我们就以纯 JavaScript 来实现一个炫酷的打字机效果。
在完成这个打字机效果之前,让我们先来体验一下打字机的效果:
开始打印
制作打字机效果
上面的效果是如何工作的呢?让我们来一步步的分析。
首先我们需要一个显示打字效果的容器:
<div class="printer-container">
<span id="teletype" hidden></span>
</div>
id 为 teletype
的<span>
元素用于显示要打印的文字。开始是它带有一个 hidden
属性,用于阻止文字在开始时就显示出来。
另外还需要一个输入框和一个按钮,让我们可以输入要打印的文字,完整的 HTML 结构如下:
<div class="container">
<div class="printer-container">
<span id="teletype" hidden></span>
</div>
<div class="input-group">
<input type="text" class="form-control u-input" placeholder="请输入要打印的文字..." value="让我们来体验一下打字机的效果">
<span class="input-group-addon" id="btn-ctrl"> 开始打印 </span>
</div>
</div>
接下来,我们定义一个光标元素,它用于模拟打字时闪烁的光标效果:
var cursor = "<span>|</span>";
然后将光标元素插入到 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 = "<span>|</span>";
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;}
}
在光标 <span>
元素调用这个动画。
#teletype span {animation: blink 1s step-end infinite;}
到这里,一个最简单的 JavaScript 打字机效果就完成了!