题解 | #文字输出#

文字输出

https://www.nowcoder.com/practice/b403d1051e5d4568912e6d265e1e2cde

注意审题，有一些小陷阱

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
       html, body {margin: 0;}
.color1 {color: #E60012;}
.color2 {color: #EB6100;}
.color3 {color: #F39800;}
.color4 {color: #FCC800;}
.color5 {color: #FFF100;}
.color6 {color: #CFDB00;}
.color7 {color: #8FC31F;}
.color8 {color: #22AC38;}
.color9 {color: #009944;}
.color10 {color: #009B6B;}
.color11 {color: #009E96;}
.color12 {color: #00A0C1;}
.color13 {color: #00A0E9;}
.color14 {color: #0086D1;}
.color15 {color: #0068B7;}
.color16 {color: #00479D;}
.color17 {color: #1D2088;}
.color18 {color: #601986;}
.color19 {color: #920783;}
.color20 {color: #BE0081;}
.color21 {color: #E4007F;}
.color22 {color: #E5006A;}
.color23 {color: #E5004F;}
.color24 {color: #E60033;}
.word {font-size: 20px;}
.content {text-align: center;font-size:0;}
.blink {
    font-size: 20px;
    animation: fade 500ms infinite;
    -webkit-animation: fade 500ms infinite;
}
@keyframes fade {
    from {opacity: 1.0;}
    50% {opacity: 0;}
    to {opacity: 1.0;}
}
    </style>
</head>

<body>
   <div class="content">
    <span class="word color23">h</span>
    <span class="word color22">e</span>
    <span class="word color4">l</span>
    <span class="word color24">l</span>
    <span class="word color17">o</span>
    <span class="word color2"> </span>
    <span class="word color9">w</span>
    <span class="word color3">o</span>
    <span class="word color1">r</span>
    <span class="word color23">l</span>
    <span class="word color15">d</span>
    <br>
    <span class="word color15">你</span>
    <span class="word color13">好</span>
    <span class="word color16">世</span>
    <span class="word color19">界</span>
    <span class="blink" id="jsBlink">|</span>
</div>
    <script type="text/javascript">
        output(' <>\n \n <> ')

        function output(str) {
          // 每次输出指定字符串前，请将闪动节点之前的所有其他节点移除
          var contentDom = document.querySelector('.content')

          while(contentDom.children.length > 1) {
            if(contentDom.children[0].id !== 'jsBlink') {
              contentDom.children[0].remove()
            }
          }

          var blinkDom = document.querySelector('#jsBlink')
          
          var strArr = str.split('');
          var count = 0;

          var timer = setInterval(function() {
            render(strArr[count], contentDom, blinkDom);
            count++
            if(count === strArr.length) {
              clearInterval(timer)
            }
          }, 200)
        };

        // 渲染
        function render(word, contentDom, blinkDom) {
          // 如果是\n请直接输出<br />
          if (word === '\n') {
            var br = document.createElement('br')
            contentDom.insertBefore(br, blinkDom)
          } else {
            var span = document.createElement('span')
            span.classList.add('word')
            span.classList.add('color' + getColorNumber())
            span.innerHTML = transferWord(word)
            contentDom.insertBefore(span, blinkDom)
          }
        }

        // 如果输出字符为空格、<、>，请分别对其进行HTML转义
        function transferWord(val) {
          var result = val
          if(val === ' ') {
            result = ' '
          } else if (val === '>') {
            result = ">"
          } else if (val === '<') {
            result = "<"
          }
          return result
        }

        // 获取随机颜色
        function getColorNumber() {
          return Math.floor(Math.random() * 24 + 1)
        };
    </script>
</body>

</html>