使用JavaScript制作打字机文本效果

我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介。我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式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打字机效果就完成了!

未经允许不得转载:yiweibang.com易微帮 » 使用JavaScript制作打字机文本效果
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!
分享到:
赞(0)