原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环

  最近写毕设时候,打算实现一个打印机效果放在首页,即,一个字一个字出现,再一个字一个字消失,如此循环。如下图为大概样子:
在这里插入图片描述
  最初我是用原生js实现的。只不过感觉代码有点…冗余吧,但是功能是没问题的,亲测可用。下面粘贴一下代码:

  首先是 html代码:

<div class="desc">
  <span id="text"></span>
  <span id="bar">|</span>
</div>

  然后是 js代码:

var i = 0;
var str = "世界奇奇怪怪,愿你可可爱爱!";
//自动打字效果
function typing() {
  var mydiv = document.getElementById("text");
  document.getElementById("bar").style.cssText = "display:none";
  mydiv.innerText = str.substring(0, i++) + (i > str.length ? "" : "|");
  var typingTimer = setTimeout(typing, 500);
  if (i > str.length) {
    clearTimeout(typingTimer);
    // 竖杠闪烁效果
    var twinkleTimer = setInterval(twinkle, 500);
    setTimeout(function () {
      clearInterval(twinkleTimer);
      document.getElementById("bar").style.cssText = "display:none";
      //自动删除文字效果
      deleteText();
    }, 3000);
  }
}
typing();

//自动删除文字效果
function deleteText() {
  var mydiv = document.getElementById("text");
  mydiv.innerText = str.substring(0, i--) + "|";
  var deleteTextTimer = setTimeout(deleteText, 50);
  if (i < 0) {
    clearTimeout(deleteTextTimer);
    //删除完后,自动打字,达到循环
    typing();
  }
}

// 竖杠闪烁效果
var flag = 0;
function twinkle() {
  if (flag) {
    document.getElementById("bar").style.cssText = "color:#fff;";
    flag = 0;
  } else {
    document.getElementById("bar").style.cssText = "color:#ffffff47;";
    flag = 1;
  }
}

  如此就ok啦。

  我是在vue项目中尝试实现的这个功能,直接写在了 mounted里,亲测可用。

  大家有什么需求可在代码基础上进行更改。



  后来了解到有关于打字机效果的js插件:typed.js

  附一下链接:https://github.com/mattboldt/typed.js/
  https://mattboldt.com/demos/typed-js/


  后来我用typed.js插件延伸的vue-typed-js插件试了一下,感觉挺ok,也写了一篇博客,附一下博客地址:在 vue 中使用 vue-typed-js 实现打字机效果

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值