一个简单的打字机效果

Xuanmo 发表于:2018-08-06 22:40:38 分类:Js&Jq案列  345  4

之前利用字符串截取方法实现简单的打字机效果


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>打字机特效</title>
</head>

<body>
  <p></p>
  <script>
    var oP = document.getElementsByTagName('p')[0];
    var str = '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
    var i = 0;
    var timer = setInterval(function() {
      var txt = str.substring(0, ++i);
      oP.innerText = txt + '⭐️';
      if (i == str.length) {
        clearInterval(timer);
        oP.innerText = txt + '';
      }
    }, 200);
  </script>
</body>

</html>

在线展示

  • 12人 Love
  • 1人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
js打字机、js特效

作者简介:Xuanmo

前端攻城狮,爱好瞎折腾。

共 4 条评论关于 “一个简单的打字机效果”