究竟是什么效果呢？


显而易见，这个效果就是在光标前面依次插入字母，每个字母的颜色随机。我们先提前写好一些颜色的样式，color0….16，然后使用随机数使用就可以了。
可以在 CodeOpen 上直接查看

DOM 结构

1
2
3
<div class="content">
  <span id="jsblink" class="blink">|</span>
</div>

很简单的一个 dom 结构，id 为 jsblink 的 span 标签是一个闪动的光标
使用 css3 动画实现，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.blink {
  animation: blink 1s infinite steps(1, start);
  font-size: 30px;
}

@keyframes blink {
  0%,
  100% {
    color: #fff;
  }
  50% {
    color: #000;
  }
}

实现逻辑

我们需要实现一个 output 函数，它接受一个 string 参数，首先我们先讲参数按每个字符分解成一个数组，然后将数组的每一个元素作为一个 span 标签的内容（如果是/n 那么就是 br 标签），将这个标签插入到 jsblink 这个 span 标签的前面。
那么如何将一个 dom 元素插入到另一个 dom 元素的前面呢？
这里我们用到 html5 的一个 API——insertBefore，它的使用方法如下

好了下面贴代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function output(str) {
        var arr = str.split('')
        var parent = document.getElementsByClassName('content')[0]
        setInterval(() => {
          if (arr.length != 0) {
            var blink = document.getElementById('jsblink')
            if (arr[0] == '/n') {
              var newEl = document.createElement('br')
              parent.insertBefore(newEl, blink)
            } else {
              var newEl = document.createElement('span')
              var num = Math.floor(Math.random() * 16)
              var color = 'color' + num
              newEl.classList.add('word')
              newEl.classList.add(color)
              newEl.innerText = arr[0]
              parent.insertBefore(newEl, blink)
            }
            arr.shift()
          }
        }, 500)
      }

      output('Hello World!')