使用 JavaScript 实现打字机效果

Feb 17, 2021
功能：打字机效果、切换光标、设置打字时间间隔和光标闪烁时间间隔
拓展：可以自行修改参数，实现自定义内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8" />
    <title>打字机</title>
    <style>
      body {
        margin: 0;
        padding: 0 0 50px;
        background: #cddc39;
        font-family: 'STXinwei';
        color: #333;
        font-size: 16px;
      }
      div:first-child {
        padding: 35px 0 15px;
        text-align: center;
      }
      button {
        margin: 0 50px;
        width: 100px;
        height: 35px;
        border: 0;
        outline: 0;
        background: #fff;
        font-weight: 800;
        border-radius: 5px;
        font-size: inherit;
        font-family: inherit;
        cursor: pointer;
      }
      #wrap {
        margin: 0 auto;
        padding: 20px 15px;
        width: 800px;
        max-width: 85%;
        background: #fff;
        border-radius: 10px;
        text-align: justify;
        line-height: 1.3em;
        font-family: inherit;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="start">开始打字</button>
      <button id="change">切换光标</button>
    </div>
    <pre id="wrap">
//打字机
function Typewriter(arg){

//options
var el = arg.el;
var cursorFlash = arg.cursorFlash;
var wordFlash = arg.wordFlash instanceof Array? arg.wordFlash : [0,400];
var m = wordFlash[0];
var n = wordFlash[1];

//创建过就不要再创建了
if(!el.typewriter){
el.typewriter = true;
}else{
return false;
}

//初始化
var text = el.innerHTML;
var len = 0;
var text_box = document.createElement('span');
var cursor_box = document.createElement('span');
cursor_box.innerHTML = '|';
el.innerHTML = '';
el.appendChild(text_box);
el.appendChild(cursor_box);

//光标闪闪
setInterval(function (){
if(cursor_box.show){
cursor_box.style.opacity = 1;
cursor_box.show = false;
}else{
cursor_box.style.opacity = 0;
cursor_box.show = true;
}
},cursorFlash);

//添加字符
function addWords(){
if(len<=text.length){
text_box.innerHTML = text.slice(0,len);
len++;
setTimeout(addWords,Math.random()*(n-m)+m);
}
}
//API
this.changeCursor = function (){
cursor_box.innerHTML = cursor_box.innerHTML == '|'? '_' : '|';
}
this.startWrite = function(){
if(!text_box.canadd){
text_box.canadd = true;
addWords();
}
}
}

var wrap = document.querySelector('#wrap');
var start = document.querySelector('#start');
var change = document.querySelector('#change');

//创建打字机
var tw = new Typewriter({
el: wrap,
cursorFlash: 400,
wordFlash: [0,400]
});

//开始
start.onclick = tw.startWrite;
//切换光标
change.onclick = tw.changeCursor;
</pre
    >

    <script>
      //打字机
      function Typewriter(arg) {
        //options
        var el = arg.el;
        var cursorFlash = arg.cursorFlash;
        var wordFlash = arg.wordFlash instanceof Array ? arg.wordFlash : [0, 400];
        var m = wordFlash[0];
        var n = wordFlash[1];

        //创建过就不要再创建了
        if (!el.typewriter) {
          el.typewriter = true;
        } else {
          return false;
        }

        //初始化
        var text = el.innerHTML;
        var len = 0;

        var text_box = document.createElement('span');
        text_box.id = 'typewriter-text';

        var cursor_box = document.createElement('span');
        cursor_box.id = 'typewriter-cursor';
        cursor_box.innerHTML = '|';

        el.innerHTML = '';
        el.appendChild(text_box);
        el.appendChild(cursor_box);

        //光标闪闪
        setInterval(function () {
          if (cursor_box.show) {
            cursor_box.style.opacity = 1;
            cursor_box.show = false;
          } else {
            cursor_box.style.opacity = 0;
            cursor_box.show = true;
          }
        }, cursorFlash);

        //添加字符
        function addWords() {
          if (len <= text.length) {
            text_box.innerHTML = text.slice(0, len);
            len++;
            setTimeout(addWords, Math.random() * (n - m) + m);
          }
        }
        //API
        this.changeCursor = function () {
          cursor_box.innerHTML = cursor_box.innerHTML == '|' ? '_' : '|';
        };
        this.startWrite = function () {
          if (!text_box.canadd) {
            text_box.canadd = true;
            addWords();
          }
        };
      }

      var wrap = document.querySelector('#wrap');
      var start = document.querySelector('#start');
      var change = document.querySelector('#change');

      //创建打字机
      var tw = new Typewriter({
        el: wrap,
        cursorFlash: 400,
        wordFlash: [10, 400],
      });

      //开始
      start.onclick = tw.startWrite;
      //切换光标
      change.onclick = tw.changeCursor;
    </script>
  </body>
</html>