关于2018.09.14百度校招Web前端工程师第二道编程题

刚刚参加了2018百度Web前端工程师的笔试，第二道编程题忘记了题干了（第一道不会··）：

<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>
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;}
}

算法已经写出来了，我把代码贴上··

function output(str) {
    var content = document.getElementsByClassName('content')[0];
    var jsBlink = document.getElementById('jsBlink');
    var children = content.children;
    for(var i=0;i<children.length;i++)/*删除*/
    {
        if(!children[i].className||children[i].className.match(/^word/))
        {
            content.removeChild(children[i]);
            i = -1;
        }
    }
    var arrp = str.split('/n');
    var arr = []; 
    var i = 1;
    for(var k = 0;k<arrp.length;k++)
    {
        var arrb = arrp[k].split("");
        arr = arr.concat(arrb); 
        if(k!=arrp.length-1)
            arr.push('/n');
    }
    for(var k = 0;k<arr.length;k++)/*替换字符串*/
    {
        /*没时间写了···不好意思····其实是忘了HTML编码··*/
        switch (arr[k]) {
            case '&': arr[k] = ("&amp;");
                    break;
            case '<': arr[k] = ("&lt;");
                    break;
            case '>': arr[k] = ("&gt;");
                    break;
            case '"': arr[k] = ("&quot;");
                    break;
            case '\'': arr[k] = ("&#x27;");
                    break;
            case '/': arr[k] = ("&#x2F;");
                    break;
            default: arr[k] = (arr[k]);
        }
    }
    function spans(i){
        if(arr[i]=='/n')
        {
            var span =  document.createElement("br");
        }else{
            var rand = Math.round(Math.random()*23+1);
            var color = 'color'+rand;
            var span  = document.createElement("span");
            span.className = "word "+color;
            span.innerHTML = arr[i];
        }
        content.insertBefore(span,jsBlink);
    }
    spans(0);
    var timer = setInterval(function(){
        if(i == arr.length-1)
        {
            clearInterval(timer);
        }
        spans(i);
        i++;
    },200);
}
output("hello world<>/n你好世界");

感觉很好玩，以后会应用到自己的网站上~~