首页 > 试题广场 >

文字输出

[编程题]文字输出

热度指数：4302 时间限制：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)