JS打字机效果

最新推荐文章于 2024-05-14 23:18:04 发布

曲小强

最新推荐文章于 2024-05-14 23:18:04 发布

阅读量243

点赞数 1

分类专栏：小卖部 js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/quhongqiang/article/details/120987497

版权

小卖部 js 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>JS打字机效果</title>
  <meta name="description" content="">
  <meta name="author" content="Administrator">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <style type="text/css">
    #main {
      width: 20%;
      height: 350px;
      margin: auto;
      padding: 10px;
      background: #cfe1ca;
      border: 10px outset #f9c6aa;
      line-height: 30px;
      color: #9f3c61;
      font-size: 18px;
    }
    p {
      text-indent: 30px;
    }
  </style>
  <script type="text/javascript">
    var typeWriter = {
      msg: function (msg) {
        return msg;
      },
      len: function () {
        return this.msg.length;
      },
      seq: 0,
      speed: 70,//打字时间(ms)
      type: function () {
        var _this = this;
        document.getElementById("main").innerHTML = _this.msg.substring(0, _this.seq);
        if (_this.seq == _this.len()) {
          _this.seq = 0;
          clearTimeout(t);
        }
        else {
          _this.seq++;
          var t = setTimeout(function () { _this.type() }, this.speed);
        }
      }
    }
    window.onload = function () {
      var msg = "我百度了一下，发现实现起来很简单，先这样，这样，然后再这样，就好了，我也觉得你这样完了之后，这样不行，你得那样";
      function getMsg() {
        return msg;
      }
      typeWriter.msg = getMsg(msg);
      typeWriter.type();
    }
  </script>
</head>

<body>
  <div id="main"> </div>
</body>

</html>

曲小强

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS打字机效果

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>JS打字机效果</title> <meta name="description" content=""> <meta na
复制链接

扫一扫

专栏目录