当前位置:首页经验分享Vue实现页面打字机效果

Vue实现页面打字机效果

前一段时间小脑抽 想在博客首页搞一个输出 崩坏星穹铁道的名词((

所以写了一个JavaScript 的打字机

JavaScript版本

实时效果

当前首页使用的就是这个、

代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .dmy-dzj {
      color: #d65858;
    }

    .dmy-dzj {
      box-sizing: border-box;
      padding: 1rem;
      font-size: 1.2rem;
    }

    /* 光标 */
    .dmy-dzj::after {
      content: '|';
      animation: writing .6s infinite;
    }

    /* 光标动画 */
    @keyframes writing {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div>
    <p class="dmy-dzj promote-sub-title line-one">
      人类从不掩饰掌控星空的欲望
    </p>
  </div>
  <script>
    const oneLiners = [
      "人类从不掩饰掌控星空的欲望",
      "月亮代表我的心",
      "星辰大海,永不止步",
      "梦想是远方的星光,照亮前行的路",
    ];

    const writeSpeed = 160;
    const delSpeed = 100;
    const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

    const text = document.querySelector('.dmy-dzj');
    let randomOneLiner = '';
    let idx = 0;

    function chooseRandomOneLiner() {
      randomOneLiner = oneLiners[Math.floor(Math.random() * oneLiners.length)];
    }

    async function typingEffect() {
      chooseRandomOneLiner();
      text.innerHTML = '';

      while (idx < randomOneLiner.length) {
        text.innerHTML += randomOneLiner[idx++];
        await delay(writeSpeed);
      }

      await delay(1000);

      while (idx >= 0) {
        text.innerHTML = randomOneLiner.substring(0, idx--);
        await delay(delSpeed);
      }

      idx = 0;
      await delay(1000);
      typingEffect();
    }

    typingEffect();

  </script>
</body>
</html>

emm最近学了Vue想到用Vue复刻一个打字机效果

Vue版本

实时效果

代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Typing Effect</title>
  <style>
    /* 打字机文本内容 */
    .dmy-dzj {
      color: #fff;
      /* mix-blend-mode: difference; */
    }

    /* 打字机文本内容 */
    .dmy-dzj {
      box-sizing: border-box;
      /* max-width: 700px; */
      padding: 1rem;
      font-size: 1.2rem;
    }

    /* 光标 */
    /* 在文本内容的最后通过添加行内元素以达到光标跟随文字的输入移动的效果 */
    .dmy-dzj::after {
      content: '|';
      animation: writing .6s infinite;
    }

    /* 光标动画 */
    @keyframes writing {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>
</head>

<body style="background: pink;">
  <div id="app">
    <p class="dmy-dzj">{{ displayedText }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          oneLiners: [
            "假设思想总是先于语言,则没有词句能定义这份喜悦。",
            "我来押注、我来博弈、我来赢取。 我任命运拨转轮盘,孤注一掷。遍历死地而后生。",
            "星辰大海,永不止步",
            "梦想是远方的星光,照亮前行的路",
            "所谓的不可能之事,只是尚未到来之事。",
          ],
          displayedText: '',
          currentPhraseIndex: 0,
          idx: 0,
          writeSpeed: 160,
          delSpeed: 100,
          writeTimer: null,
          delTimer: null,
        };
      },
      mounted() {
        this.startWriting();
      },
      methods: {
        startWriting() {
          this.writeTimer = setInterval(this.writing, this.writeSpeed);
        },
        writing() {
          const currentPhrase = this.oneLiners[this.currentPhraseIndex];
          this.displayedText += currentPhrase[this.idx++];
          if (this.idx >= currentPhrase.length) {
            clearInterval(this.writeTimer);
            setTimeout(() => {
              this.delTimer = setInterval(this.deleting, this.delSpeed);
            }, 2000);
          }
        },
        deleting() {
          const currentPhrase = this.oneLiners[this.currentPhraseIndex];
          this.displayedText = currentPhrase.substring(0, this.idx--);
          if (this.idx < 0) {
            clearInterval(this.delTimer);
            this.idx = 0;
            this.currentPhraseIndex = (this.currentPhraseIndex + 1) % this.oneLiners.length;
            setTimeout(() => {
              this.startWriting();
            }, 1000);
          }
        }
      }
    });
  </script>
</body>

</html>

两个大同小异(((

版权声明
文章链接: https://dmyblog.cn/1729.html
文章标题: Vue实现页面打字机效果
声明: 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,发布本站内容到任何网站。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理

给TA打赏
共{{data.count}}人
人已打赏
经验分享

分享一个-彻底关闭Win自动更新

2024-6-19 21:15:56

经验分享

unturned开服教程

2024-7-13 17:58:25

0 条回复 UP文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索