一个简单的打字机效果

轩陌

分类: JavaScript 4063 7

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

<!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 + '&#x2b50;&#xfe0f;';
      if (i == str.length) {
        clearInterval(timer);
        oP.innerText = txt + '';
      }
    }, 200);
  </script>
</body>

</html>

在线展示

  • 21人 Love
  • 5人 Haha
  • 1人 Wow
  • 1人 Sad
  • 1人 Angry
js打字机、js特效

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

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

Loading...