JS实现打字效果

最新推荐文章于 2024-09-04 11:41:06 发布

gxhlh

最新推荐文章于 2024-09-04 11:41:06 发布

阅读量1.6k

点赞数 1

分类专栏：原生JavaScript编程练习

本文链接：https://blog.csdn.net/qq_44721831/article/details/116088661

版权

原生JavaScript编程练习专栏收录该内容

18 篇文章 2 订阅

订阅专栏

原生JS实现打字效果：

给 Element.prototype 设置了一个函数对象

<body>
    <div id="code">我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的；后来想，
        凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，
        而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，
        我于是以我所感到者为寂寞。这寂寞又一天一天地长大起来，如大毒蛇，缠住了我的灵魂了。</div>
    <script>
        Element.prototype.typewriter = function (a) {
            var d = this,
                c = d.innerHTML,
                b = 0;
            d.innerHTML = "";
            var e = setInterval(function () {
                b++
                d.innerHTML = c.substring(0, b) + (b & 1 ? "|" : ""); //&1 这个表达式 可以用来 判断 a的奇偶性
                if (b >= c.length) {
                    clearInterval(e)
                }
            }, 150)
            return this
    
        }
        document.getElementById("code").typewriter();
    </script>
</body>

在这里插入图片描述

实现打字效果的插件 typed.js

typed.js
vue-typed-js

js： In an input

var typed4 = new Typed('#typed4', {
    strings: ['Some strings without', 'Some HTML', 'Chars'],
    typeSpeed: 0,
    backSpeed: 0,
    attr: 'placeholder',
    bindInputFocusEvents: true,
    loop: true
  });

Smart Backspace

var typed3 = new Typed('#typed3', {
    strings: ['My strings are: <i>strings</i> with', 'My strings are: <strong>HTML</strong>', 'My strings are: Chars &times; &copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    smartBackspace: true, // this is a default
    loop: true
  });

Shuffled

var typed5 = new Typed('#typed5', {
    strings: ['1 Some <i>strings</i> with', '2 Some <strong>HTML</strong>', '3 Chars &times; &copy;'],
    typeSpeed: 0,
    backSpeed: 0,
    cursorChar: '_',
    shuffle: true,
    smartBackspace: false,
    loop: true
  });

Bulk Typing

var typed6 = new Typed('#typed6', {
    strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
    typeSpeed: 40,
    backSpeed: 0,
    loop: true
  });

参考链接（示例）：
https://mattboldt.github.io/typed.js/
http://cheng.lolku.cn/html/typed.html

<style type="text/css">
/* 如果光标没出现，而是出现在下一行，那么就是盒子是块级标签，必须得转换成行内标签 */
h2 {
  display: inline;
}
/* 想让的光标闪动的话，复制下面的代码 */
.typed-cursor{
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}
.typed-fade-out{
  opacity: 0;
  transition: opacity .25s;
  -webkit-animation: 0;
  animation: 0;
}
</style>

<span id="box"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
   var boxObj = document.getElementById('box');
   new Typed(boxObj,{
      // 注意：输出的可以是标签，将标签当节点运行。比如下面的h2
      strings: ['<h2>我是打印字typed.js<h2>','我是案例一222','我是最后一个打印出来的'],
      typeSpeed:200 // 速度
   });
</script>

typed的事件：

<input type="text" class="box6" name="">
<br>
<br>
<button class="start">开始</button>
<button class="stop">暂停</button>
<button class="toggle">切换</button>
<button class="reset">重置</button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var startBtn = document.querySelector('.start');
var stopBtn = document.querySelector('.stop');
var toggleBtn = document.querySelector('.toggle');
var resetBtn = document.querySelector('.reset');
var typed = new Typed('.box6',{
  strings: ['温故而知新，可以为师矣。学而不思则罔 思而不学则殆。见贤思齐焉，见不贤而内自省也。'],
  typeSpeed: 200,
  startDelay: 100,
  loop: true,
  loopCount: Infinity,
  bindInputFocusEvents:true
});
startBtn.onclick = function () {
  typed.start();
}
stopBtn.onclick = function () {
  typed.stop();
}
toggleBtn.onclick = function () {
  typed.toggle();
}
resetBtn.onclick = function () {
  typed.reset();
}
</script>