HTML/CSS/JavaScript 解法, 执行用时: 911ms, 内存消耗: 77848KB, 提交时间: 2020-12-23

{"css":"html, body {margin: 0;}\n.color1 {color: #E60012;}\n.color2 {color: #EB6100;}\n.color3 {color: #F39800;}\n.color4 {color: #FCC800;}\n.color5 {color: #FFF100;}\n.color6 {color: #CFDB00;}\n.color7 {color: #8FC31F;}\n.color8 {color: #22AC38;}\n.color9 {color: #009944;}\n.color10 {color: #009B6B;}\n.color11 {color: #009E96;}\n.color12 {color: #00A0C1;}\n.color13 {color: #00A0E9;}\n.color14 {color: #0086D1;}\n.color15 {color: #0068B7;}\n.color16 {color: #00479D;}\n.color17 {color: #1D2088;}\n.color18 {color: #601986;}\n.color19 {color: #920783;}\n.color20 {color: #BE0081;}\n.color21 {color: #E4007F;}\n.color22 {color: #E5006A;}\n.color23 {color: #E5004F;}\n.color24 {color: #E60033;}\n.word {font-size: 20px;}\n.content {text-align: center;font-size:0;}\n.blink {\n    font-size: 20px;\n    animation: fade 500ms infinite;\n    -webkit-animation: fade 500ms infinite;\n}\n@keyframes fade {\n    from {opacity: 1.0;}\n    50% {opacity: 0;}\n    to {opacity: 1.0;}\n}","js":"function output(str) {\n    //删除原有结点\n    var contents = document.getElementsByClassName('content');\n    var jsBlink = document.getElementById('jsBlink');\n    var childs = contents[0].childNodes;\n    while(childs.length > 0){\n        if(childs[0] == jsBlink){\n            break;\n        }\n        contents[0].removeChild(childs[0]);\n    }\n    var i = 0;\n    //每隔200毫秒输出字符\n    var fun = setInterval(function(){\n        if(i == str.length) clearInterval(fun);\n        else{\n            var c = str[i];\n            if(c == '\\n'){\n                console.log(c);\n                var br = document.createElement('br');\n                contents[0].insertBefore(br, jsBlink);\n            }else{\n                var newSpan = document.createElement('span');\n                newSpan.className = \"word color\" + (Math.floor(Math.random() * 24) + 1);\n                if(c == '<'){\n                    c = '&lt';\n                }else if(c == '>'){\n                    c = '&gt';\n                }else if(c == ' '){\n                    c = '&nbsp';\n                }\n                newSpan.innerHTML = c;\n                contents[0].insertBefore(newSpan, jsBlink);\n            }\n            i++;\n        }\n    }, 200);\n}","html":"<div class=\"content\">\n    <span class=\"word color23\">h</span>\n    <span class=\"word color22\">e</span>\n    <span class=\"word color4\">l</span>\n    <span class=\"word color24\">l</span>\n    <span class=\"word color17\">o</span>\n    <span class=\"word color2\">&nbsp;</span>\n    <span class=\"word color9\">w</span>\n    <span class=\"word color3\">o</span>\n    <span class=\"word color1\">r</span>\n    <span class=\"word color23\">l</span>\n    <span class=\"word color15\">d</span>\n    <br>\n    <span class=\"word color15\">你</span>\n    <span class=\"word color13\">好</span>\n    <span class=\"word color16\">世</span>\n    <span class=\"word color19\">界</span>\n    <span class=\"blink\" id=\"jsBlink\">|</span>\n</div>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 959ms, 内存消耗: 77872KB, 提交时间: 2021-06-23

{"css":"html, body {margin: 0;}\n.color1 {color: #E60012;}\n.color2 {color: #EB6100;}\n.color3 {color: #F39800;}\n.color4 {color: #FCC800;}\n.color5 {color: #FFF100;}\n.color6 {color: #CFDB00;}\n.color7 {color: #8FC31F;}\n.color8 {color: #22AC38;}\n.color9 {color: #009944;}\n.color10 {color: #009B6B;}\n.color11 {color: #009E96;}\n.color12 {color: #00A0C1;}\n.color13 {color: #00A0E9;}\n.color14 {color: #0086D1;}\n.color15 {color: #0068B7;}\n.color16 {color: #00479D;}\n.color17 {color: #1D2088;}\n.color18 {color: #601986;}\n.color19 {color: #920783;}\n.color20 {color: #BE0081;}\n.color21 {color: #E4007F;}\n.color22 {color: #E5006A;}\n.color23 {color: #E5004F;}\n.color24 {color: #E60033;}\n.word {font-size: 20px;}\n.content {text-align: center;font-size:0;}\n.blink {\n    font-size: 20px;\n    animation: fade 500ms infinite;\n    -webkit-animation: fade 500ms infinite;\n}\n@keyframes fade {\n    from {opacity: 1.0;}\n    50% {opacity: 0;}\n    to {opacity: 1.0;}\n}","js":"function output(str) {\n    // Array.from(document.querySelectorAll('.word')).forEach(v=>{\n    //    v.parentNode.removeChild(v)\n    //})\n    var blink = document.getElementById('jsBlink');  \n    document.querySelector('.content').innerHTML = ``;\n    document.querySelector('.content').appendChild(blink)\n    var arr = str.split('')\n    var intervalTime = setInterval(()=>{\n        if(arr.length == 0){return clearInterval(intervalTime)}\n        var key = arr.shift();\n        console.log(key)\n        if(key!='\\n'){\n            var el = document.createElement(key!='\\n'?'span':'br');\n            el.classList.add('word')\n            el.innerText = key;\n            el.classList.add('color'+(Math.random() * 24 >>> 0))\n            jsBlink.parentNode.insertBefore(el, jsBlink)\n        }else{\n            \n            var el = document.createElement(key!='\\n'?'span':'br');\n            //el.classList.add('word')\n            //el.innerText = key;\n            //el.classList.add('color'+(Math.random() * 24 >>> 0))\n            jsBlink.parentNode.insertBefore(el, jsBlink)\n        }\n    }, 200)\n}\nfunction output(str) {\n    //删除原有结点\n    var contents = document.getElementsByClassName('content');\n    var jsBlink = document.getElementById('jsBlink');\n    var childs = contents[0].childNodes;\n    while(childs.length > 0){\n        if(childs[0] == jsBlink){\n            break;\n        }\n        contents[0].removeChild(childs[0]);\n    }\n    var i = 0;\n    //每隔200毫秒输出字符\n    var fun = setInterval(function(){\n        if(i == str.length) clearInterval(fun);\n        else{\n            var c = str[i];\n            if(c == '\\n'){\n                console.log(c);\n                var br = document.createElement('br');\n                contents[0].insertBefore(br, jsBlink);\n            }else{\n                var newSpan = document.createElement('span');\n                newSpan.className = \"word color\" + (Math.floor(Math.random() * 24) + 1);\n                if(c == '<'){\n                    c = '&lt';\n                }else if(c == '>'){\n                    c = '&gt';\n                }else if(c == ' '){\n                    c = '&nbsp';\n                }\n                newSpan.innerHTML = c;\n                contents[0].insertBefore(newSpan, jsBlink);\n            }\n            i++;\n        }\n    }, 200);\n}","html":"<div class=\"content\">\n    <span class=\"word color23\">h</span>\n    <span class=\"word color22\">e</span>\n    <span class=\"word color4\">l</span>\n    <span class=\"word color24\">l</span>\n    <span class=\"word color17\">o</span>\n    <span class=\"word color2\">&nbsp;</span>\n    <span class=\"word color9\">w</span>\n    <span class=\"word color3\">o</span>\n    <span class=\"word color1\">r</span>\n    <span class=\"word color23\">l</span>\n    <span class=\"word color15\">d</span>\n    <br>\n    <span class=\"word color15\">你</span>\n    <span class=\"word color13\">好</span>\n    <span class=\"word color16\">世</span>\n    <span class=\"word color19\">界</span>\n    <span class=\"blink\" id=\"jsBlink\">|</span>\n</div>","libs":[]}