首页 > 试题广场 >

文字输出

[编程题]文字输出
  • 热度指数：4263 时间限制：C/C++ 2秒，其他语言4秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
页面上存在id为jsBlink的下划线闪动节点，请按照如下需求实现 output 函数
1、函数 output 接收一个字符串参数，每隔200毫秒在闪动节点之前逐个显示字符
2、请新建span节点放置每个字符，其中span必须存在class "word"，并随机加上 color1 ~ color24 中的任一个class（请使用系统随机函数）
3、每次输出指定字符串前，请将闪动节点之前的所有其他节点移除
4、不要销毁或者重新创建闪动节点
5、如果输出字符为空格、<、>，请分别对其进行HTML转义，如果是\n请直接输出<br />，其他字符不需要做处理
6、请不要手动调用output函数
7、当前界面为系统执行 output('hello world\n你好世界') 之后，最终的界面，过程请参考以下图片
8、请不要手动修改html和css
9、不要使用第三方插件
10、请使用ES5语法
算法知识视频讲解
添加回答
JavaScript
清^欢头像 清^欢 
function output(str) {
    //删除原有结点
    var contents = document.getElementsByClassName('content');
    var jsBlink = document.getElementById('jsBlink');
    var childs = contents[0].childNodes;
    while(childs.length > 0){
        if(childs[0] == jsBlink){
            break;
        }
        contents[0].removeChild(childs[0]);
    }
    var i = 0;
    //每隔200毫秒输出字符
    var fun = setInterval(function(){
        if(i == str.length) clearInterval(fun);
        else{
            var c = str[i];
            if(c == '\n'){
                console.log(c);
                var br = document.createElement('br');
                contents[0].insertBefore(br, jsBlink);
            }else{
                var newSpan = document.createElement('span');
                newSpan.className = "word color" + (Math.floor(Math.random() * 24) + 1);
                if(c == '<'){
                    c = '&lt';
                }else if(c == '>'){
                    c = '&gt';
                }else if(c == ' '){
                    c = '&nbsp';
                }
                newSpan.innerHTML = c;
                contents[0].insertBefore(newSpan, jsBlink);
            }
            i++;
        }
    }, 200);
}


发表于 2020-03-14 13:33:12 回复(2)
鱼忘七秒头像 鱼忘七秒 
function output(str) {
            //先删除原有的节点  
            var showContent = document.getElementsByClassName("content");
            var childSpan = document.getElementsByClassName("word");
            console.log(showContent)
            console.log(childSpan)
            while (childSpan.length > 0) {
                showContent[0].removeChild(childSpan[0]);
            }
            //删除剩下的换行 
            var brr = document.getElementsByTagName("br"); 
            if (brr.length > 0) {
                showContent[0].removeChild(brr[0]);
            }          
                             
            //转义  
            var arr = str.split('');
            console.log(arr)
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] != " " || arr[i] != "<" || arr[i] != ">") {

                } else {
                    arr[i] = arr[i].replace(/[<>\ ]/g, function (c) {
                        switch (c) {
                            case "<":
                                return '&lt';
                                break;
                            case ">":
                                return '&gt';
                                break;                      
                            case "\ ":
                                return '&nbsp';
                                break;                           
                        }
                    })
                }
            }
            console.log(arr);

            //获取闪动节点  
            var blink = document.getElementById("jsBlink");
            //设置定时器  
            var j = 0;
            var sId;
            var tId;
            var show = setInterval(function () {
                if (j >= arr.length) {
                    clearInterval(show);
                    sId = setTimeout(function () {
                        //先删除原有的节点  
                        var showContent = document.getElementsByClassName("content");
                        var childSpan = document.getElementsByClassName("word");
                        console.log(showContent)
                        console.log(childSpan)
                        while (childSpan.length > 0) {
                            showContent[0].removeChild(childSpan[0]);
                        }
                        //删除剩下的换行 
                        var brr = document.getElementsByTagName("br");
                        showContent[0].removeChild(brr[0]);
                    }, 500);

                    tId = setTimeout(function () {
                        output("hello world\n你好世界");
                    }, 1000)
                    return
                }
                if (arr[j] == "\n") {
                    var newChild = document.createElement("br");
                    showContent[0].insertBefore(newChild, blink);
                } else {
                    var newChild = document.createElement("span");
                    newChild.innerHTML = arr[j];    //包括空格
                    newChild.className = "word" + " color" + (Math.floor(Math.random() * (24 - 1 + 1)) + 1);
                    showContent[0].insertBefore(newChild, blink);
                }
                j++;
            }, 200);
        }

        output("hello world\n你好世界")
注意开始和最后闪动节点闪了两处
发表于 2019-08-19 00:27:23 回复(1)
晓晨学前端头像 晓晨学前端
 4/5 组用例通过   有一个错误 
可以自己加一下转义
 function output(str) {
            let content = document.getElementsByClassName('content')[0];
            //获取闪光点
            let jsBlink = document.getElementById('jsBlink');
            //每次都清空页面，只保留一个闪光点
            content.innerHTML = ''
            content.appendChild(jsBlink)
            //将输入的字符串分割成数组
            let strArr = str.split('');
            let num = 0
            var timer = setInterval(function () {
                if (num == strArr.length) {
                    clearInterval(timer)
                } else {
                    let span = document.createElement('span')
                    span.innerHTML = strArr[num]
                    let str = 'color' + Math.floor(Math.random() * 24 + 1)
                    span.classList.add('word')
                    span.classList.add(str)
                    content.insertBefore(span, jsBlink)
                    num++
                }
            }, 200)
        }
发表于 2022-04-21 20:56:29 回复(0)
小宇点头像 小宇点 
function output(str) {
            var content = document.getElementsByClassName('content')[0];
            //每次都清空页面，只保留一个闪光点
            content.innerHTML = '<span class="blink" id="jsBlink">|</span>';
            var strArr = str.split('');
            var contentSpan = document.getElementsByClassName('word');
            var jsBlink = document.getElementById('jsBlink');
            //把每一个特殊的字符转义
            strArr = strArr.map(function (item) {
                if (item === '<') {
                    return '&lt;'
                } else if (item === '>') {
                    return '&gt;'
                } else if (item === '\n') {
                    return '<br>'
                } else {
                    return item;
                }
            })
            var i = 0;
            var timer = setInterval(() => {
                if(i === strArr.length){
                    clearInterval(timer);
                }else{
                    var span = document.createElement('span');
                    span.classList.add('word');
                    var strNum = 'color' + Math.floor(Math.random() * (23 - 0) + 0);
                    span.classList.add(strNum);
                    span.innerHTML = strArr[i];
                    content.insertBefore(span, jsBlink);
                    i++;
                }
            }, 200)

        }

发表于 2020-05-08 00:37:12 回复(2)
Sonder2头像 Sonder2 
     function output(str) {
        let div = document.querySelector('.content')
        let blink = document.querySelector('#jsBlink')
        while (div.firstChild && div.firstChild.textContent !== '|') div.removeChild(div.firstChild)
        let result = str.split('').map(item => {
            let dom;
            switch (item) {
                case '\n':
                    dom = document.createElement('br');
                    break;
                case '<':
                    dom = document.createElement('span');
                    dom.innerHTML = '&lt;';
                    break;
                case '>':
                    dom = document.createElement('span');
                    dom.innerHTML = '&gt;';
                    break;
                case ' ':
                    dom = document.createElement('span');
                    dom.innerHTML = '&nbsp;';
                    break;
                default:
                    dom = document.createElement('span');
                    dom.innerHTML = item;
                    break;
            }
            dom.classList.add('word')
            dom.classList.add(`color${Math.ceil(Math.random() * 24)}`)
            return dom
        })

        let count = 0
        let timer = setInterval(() => {
            div.insertBefore(result[count], blink)
            count++
            if (count === result.length) clearInterval(timer)

        }, 200)
    }
发表于 2023-09-22 16:29:43 回复(0)
有担当的代码渣渣才华横溢头像 有担当的代码渣渣才华横溢
  function output(str) {
    // 为什么会通过不了呢
    let content = document.querySelector('.content')
    let jsBlink = document.querySelector('#jsBlink')
    let child = content.children
    while (child.length > 0) {
      if (child[0] == jsBlink) break
      content.removeChild(child[0])
    }
    let i = 0
    let timer = setInterval(function () {
      if (i == str.length - 1) clearTimeout(timer)
      let random = Math.floor(Math.random() * 24 + 1);
      if (str[i] == '\n') {
        let br = document.createElement('br')
        content.insertBefore(br, jsBlink)
      } else {
        let span = document.createElement('span')
        if (str[i] == '>') {
          span.innerHTML = '&gt'
        } else if (str[i] == '<') {
          span.innerHTML = '&lt'
        } else if (str[i] == ' ') {
          span.innerHTML = '&nbps'
        }
        span.innerHTML = str[i]
        span.classList.add('word', `color${random}`)
        content.insertBefore(span, jsBlink)
      }
      i++
    }, 200)
  }

发表于 2023-02-26 21:52:10 回复(0)
HTML/CSS/JavaScript
路过的一名白的不能再白的小白头像 路过的一名白的不能再白的小白 
function output(str) {
        var content = document.querySelector(".content"), jsBlink = document.querySelector("#jsBlink");
        var timer = null, i = 0;
        timer = setInterval(() => {
          // 清空上一次赋值的字符串
          while (jsBlink.previousElementSibling) content.removeChild(jsBlink.previousElementSibling);
          for (var index = 0; index <= i; index++) {
            var elTag = "span", el
            if (str[index] === "\n") elTag = "br"
            el = document.createElement(elTag)

            if (str[index] !== "\n") {
              // 添加类名
              el.className = "word color"+ Math.floor(Math.random() * 24 + 1)
              if (str[index] === " "){
                el.innerHTML = "&nbsp;"
              } else if (str[index] === ">"){
                el.innerHTML = "&gt;"
              } else if (str[index] === "<"){
                el.innerHTML = "&lt;"
              } else {
                el.innerHTML = str[index]
              }
            }
            content.insertBefore(el, jsBlink);
          }

          if (i === str.length - 1) {
            clearInterval(timer);
            timer = null;
          }
          i++;
        }, 200);
 }

发表于 2022-10-12 13:42:46 回复(0)
HTML/CSS/JavaScript
花落再无相伴头像 花落再无相伴 
// 首先有一个生成指定范围内的随机颜色字符串 color1~color24
      const rdColor = (min, max) => {
        // 生成指定范围内的数字函数
        const randomNum = (min, max) => {
          return Math.floor(Math.random() * (max - min)) + min;
        };
        return `color${randomNum(min, max)}`;
      };
      function output(str) {
        // 字符串拆分为数组
        const arr = str.split("");
        const jsBlink = document.querySelector("#jsBlink");
        // 原数据清空
        Array.from(document.querySelector(".content").children).forEach(
          (element) => {
            if (!element.hasAttribute("id")) {
              document.querySelector(".content").removeChild(element);
            }
          }
        );
        // 遍历数组,并在jsBlinK之前插入
        for (const key in arr) {
          (() => {
            setTimeout(() => {
              // 判断是否为数组当前值是否需要转义
              if (["\n", "<", ">", " "].includes(arr[key])) {
                arr[key] = arr[key].replace(
                  /</g,
                  `<span class="word ${rdColor(1, 24)}">&lt;</span>`
                );
                arr[key] = arr[key].replace(
                  />/g,
                  `<span class="word ${rdColor(1, 24)}">&gt;</span>`
                );
                arr[key] = arr[key].replace(
                  / /g,
                  `<span class="word ${rdColor(1, 24)}">&nbsp;</span>`
                );
                arr[key] = arr[key].replace(/\n/g, "<br />");
                jsBlink.insertAdjacentHTML("beforebegin", arr[key]);
              } else {
                // 不需要转移直接插入
                jsBlink.insertAdjacentHTML(
                  "beforebegin",
                  `<span class="word ${rdColor(1, 24)}">${arr[key]}</span>`
                );
              }
            }, 200 * (+key + 1));
          })();
        }
      }
      output("hello world\n你好世界");

发表于 2022-08-22 11:56:06 回复(0)
HTML/CSS/JavaScript
huaxifn头像 huaxifn 
function output(str) {
    var content = document.querySelector('.content');
    var childArr = Array.from(content.children);
    // 闪动节点
    var jsBlink = document.getElementById('jsBlink');
    
    // 闪动节点之前的所有其他节点移除
    childArr.pop();
    childArr.forEach(el=>{
        content.removeChild(el);
    })
    
    var i = 0;
    var timerId = setInterval(()=>{
        if(i<Array.from(str).length){
            var el = Array.from(str)[i];
            // 随机加上 color1 ~ color24 中的任一个class
            var color = 'color' + Math.floor(Math.random()*24+1);
            // 请新建span节点
            var span = document.createElement('span');
            span.className = 'word '+color;

            //HTML转义
            if(/\n/.test(el)){
                span = document.createElement('br');
                console.log(span);
                span.className = '';
            }else if(/</.test(el)){
                span.innerHTML = '&lt;';
            }else if(/>/.test(el)){
                span.innerHTML = '&gt;';
            }else if(/\s/.test(el)){
                span.innerHTML = '&nbsp;';
            }else{
                span.innerHTML = el;
            }
            content.insertBefore(span,jsBlink);
            i++;
        }else{
            clearInterval(timerId);
        }
    },200)
}

发表于 2022-02-18 11:36:05 回复(0)
HTML/CSS/JavaScript
龙仔爱思考头像 龙仔爱思考 
var blink = document.querySelector('#jsBlink')
var content = document.querySelector('.content')

function output(str) {
    removeNodeAll()
    var wordArr = str.split('');
    var index = 0;
    const timer = setInterval(() => {
        if (index < wordArr.length) {
            insertNode(wordArr[index])
            index++
        } else {
            window.clearInterval(timer)
        }
    }, 200)
    }

function removeNodeAll() {
    var preNode = blink.previousElementSibling
    while (preNode) {
        content.removeChild(preNode)
        preNode = blink.previousElementSibling
    }
}

function insertNode(w) {
    var word = transferStr(w)
    var node;
    if (word === '\n') {
        node = document.createElement('br')
    } else {
        node = document.createElement('span')
        node.className = `word ${genColor()}`
        node.innerText = word
    }
    content.insertBefore(node, blink)
}

function genColor() {
    return `color${Math.ceil(Math.random() * 25)}`
}

function transferStr(word) {
    switch (word) {
        case ' ':
            return '&nbsp;'
        case '>':
            return '&gt;'
        case '<':
            return '&lt;'
        default:
            return word
    }
}

发表于 2021-12-09 18:49:20 回复(0)
HTML/CSS/JavaScript
monze头像 monze

需要将cont中子节点(除jsBlink)通过remove移除，并且\n需要document.createElement创建一个br元素

function output(str) {
  var cont = document.querySelector('.content')
  // 获取光标节点
  var blink = document.getElementById('jsBlink')
  // 每次都清空内容 保留光标
  while(cont.children[0] != blink) {
    cont.children[0].remove()
  }

  // 分割输入的str字符串
  var strArr = str.split('')

  // 转义字符
  strArr = strArr.map(item => {
    if (item === '<') {
      return '&lt;'
    } else if (item === '>') {
      return '&gt;'
    } else if (item === ' ') {
      return '&nbsp;'
    } else {
      return item;
    }
  })
  // 设置定时器
  var i = 0
  var timer = setInterval(() => {
    if (i == strArr.length) {
      // 清除定时器
      clearInterval(timer)
    } else {
      if (strArr[i] == '\n') {
        var br = document.createElement('br')
        cont.insertBefore(br, blink)
      } else {
        // 根据内容添加至span内 并且设置class类
        let span = document.createElement('span')
        let colorNum = 'color' + Math.floor(Math.random() * 24 + 1)
        span.classList.add('word', colorNum)
        span.innerHTML = strArr[i]
        cont.insertBefore(span, blink)
      }
      i++
    }
  }, 200)
}
发表于 2021-11-30 14:22:12 回复(0)
HTML/CSS/JavaScript
球球你来个offer吧头像 球球你来个offer吧
看来大家的都一样，那我只能压缩一下代码来突出不同了🤣🤣 

function output(str) {
  var content = document.getElementsByClassName('content')[0];
  var jsBlink = document.getElementById('jsBlink');

  var rmItem;
  while ((rmItem = jsBlink.previousElementSibling)) {
    rmItem.remove();
  }

  var strArr = ('' + str).split('');
  var i = 0,
    totalCount = strArr.length;
  var timer = setInterval(function () {
    i >= totalCount ? clearInterval(timer) : render(strArr[i++]);
  }, 200);

  function render(item) {
    if (item === '\n') {
      content.insertBefore(document.createElement('br'), jsBlink);
      return;
    }
    var span = document.createElement('span');
    span.className = 'word color' + (Math.floor(Math.random() * 24) + 1);
    var symbolObj = {
      ' ': '&nbsp;',
      '<': '&lt;',
      '>': '&gt;',
    };
    span.innerHTML = symbolObj[item] || item;
    content.insertBefore(span, jsBlink);
  }
}


发表于 2021-11-10 21:26:59 回复(0)
HTML/CSS/JavaScript
像一颗滚石头像 像一颗滚石 
function output(str) {
    var content = document.getElementsByClassName('content')[0];
    var jsBlink = document.getElementById('jsBlink');
    var length = str.length;
    var idx = 0;

    // 移除闪动节点前的节点
    while (content.children[0].id !== 'jsBlink') {
        content.removeChild(content.children[0]);
    }

    // 生成节点
    var time = function () {
        var c = str[idx];

        if (c === '\n') {
            var br = document.createElement('br');
            content.insertBefore(br, jsBlink);
        } else {
            var span = document.createElement('span');
            switch (c) {
                case ' ':
                    span.innerHTML = '&nbsp;';
                    break;
                case '<':
                    span.innerHTML = '&lt;';
                    break;
                case '>':
                    span.innerHTML = '&gt;';
                    break;
                default:
                    span.innerHTML = c;
                    break;
            }
            span.className = 'word' + ' ' + 'color' + Math.ceil(Math.random() * 23);
            content.insertBefore(span, jsBlink);
        }
        if (++idx >= length) return;
        setTimeout(time, 200);
    }
    time();
}

发表于 2021-08-19 10:27:35 回复(0)
gys96头像 gys96
function output(str) {
    var strarr = str.split('')
   var length = strarr.length
    var oContent = document.querySelector('.content')
    var oLine = document.querySelector('#jsBlink')
    var ospan = oContent.children
    if(ospan.length > 1){
         for(var i=ospan.length-2;i>=0;i--){
            oContent.removeChild(ospan[i])
        }
    }
    var count = 0
    var timer = setInterval(()=>{
        if(count >=length){
            clearInterval(timer)
        }else{
        var val = strarr[count]
        switch(val){
            case ' ':
                    val = '&nbsp;'
                break;
            case '<':
                    val = '&lt;'
                break;
            case '>':
                    val = '&gt;'
                break;     
        }
            if(val == '\n'){
            var oBr = document.createElement('br')
            oContent.insertBefore(oBr,oLine)
        }else {
            var oSpan = document.createElement('span')
            var colorIndex = Math.floor(Math.random()*24)
            oSpan.setAttribute('class',`word color${colorIndex}`)
            oSpan.innerHTML = val
            oContent.insertBefore(oSpan,oLine)
        }
        count ++
        }
        
    },200)
}

四组测试用例通过 还有一组没通过 暂时没找到原因
发表于 2021-06-07 17:56:43 回复(2)
提交观点

问题信息

字符串 模拟 前端工程师 2019 百度
上传者：小小
难度：
14条回答 4676浏览

热门推荐

通过挑战的用户

查看代码

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号