FED88. 文字输出
描述
页面上存在id为jsBlink的下划线闪动节点，请按照如下需求实现 output 函数
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 = '<';\n }else if(c == '>'){\n c = '>';\n }else if(c == ' '){\n c = ' ';\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\"> </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-24
{"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 = '<';\n }else if(c == '>'){\n c = '>';\n }else if(c == ' '){\n c = ' ';\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\"> </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 解法, 执行用时: 962ms, 内存消耗: 78060KB, 提交时间: 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 var content = document.getElementsByClassName(\"content\")[0];\n var jsBlink = document.getElementById(\"jsBlink\");\n while (content.firstElementChild != jsBlink) {\n content.removeChild(content.firstChild);\n }\n str = str.split(\"\");\n var index = 0;\n var timer = setInterval(function () {\n if (index == str.length) {\n clearInterval(timer);\n } else {\n if (str[index] == \"\\n\") {\n var br = document.createElement(\"br\");\n content.insertBefore(br, jsBlink);\n } else {\n if (str[index] == \" \") {\n str[index] = \" \"\n }\n if (str[index] == \"<\") {\n str[index] = \"<\"\n }\n if (str[index] == \">\") {\n str[index] = \">\"\n }\n var span = document.createElement(\"span\");\n var colorIndex = Math.floor(Math.random() * 24) + 1;\n var className = \"color\" + colorIndex;\n span.className = \"word \" + className;\n span.innerHTML = str[index];\n content.insertBefore(span, jsBlink);\n }\n index += 1;\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\"> </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 解法, 执行用时: 974ms, 内存消耗: 77844KB, 提交时间: 2021-06-01
{"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 var blink = document.querySelector('#jsBlink');\n var parent = blink.parentNode;\n\n while(parent.children.length) {\n if (parent.children[0] === blink) {\n break;\n } else {\n parent.removeChild(parent.children[0]);\n }\n }\n\n function h(tagName, text) {\n var el = document.createElement(tagName);\n \n if (tagName !== 'br') {\n el.className = 'word color' + (Math.floor(Math.random() * 24) + 1);\n el.innerHTML = text;\n }\n \n return el;\n }\n \n var obj = {\n '<': function() {\n return h('span', '<')\n },\n '>': function() {\n return h('span', '>')\n },\n ' ': function() {\n return h('span', ' ')\n },\n '\\n': function() {\n return h('br')\n }\n };\n \n var i = 0;\n var timer = setInterval(function() {\n if (i === str.length) {\n clearInterval(timer);\n } else {\n var c = str[i];\n var node = obj[c] ? obj[c]() : h('span', c);\n parent.insertBefore(node, blink) \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\"> </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 解法, 执行用时: 997ms, 内存消耗: 77856KB, 提交时间: 2021-05-24
{"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 var contents=document.getElementsByClassName(\"content\");\n var jsBlink = document.getElementById(\"jsBlink\");\n var childs=contents[0].childNodes;\n while (childs.length>0){\n console.log(childs);\n if(childs[0]==jsBlink){\n break;\n }\n contents[0].removeChild(childs[0]);\n }\n var i=0;\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='<';\n }else if(c=='>'){\n c='>';\n }else if(c==' '){\n c=' ';\n }\n newSpan.innerHTML=c;\n contents[0].insertBefore(newSpan,jsBlink);\n }\n i++;\n }\n },200)\n }\n \n output(\"hello world\\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\"> </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":[]}