web前端之页面逐渐呈现代码功能、对象数据如何获取下一个值、创建元素并添加id与类名、自定义函数执行顺序、实时监听元素高度、代码着色或高亮

最新推荐文章于 2024-09-30 15:42:36 发布

2401_84411822

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量396

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411822/article/details/138966613

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

style(全部代码)

\* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 0;
}

body {
    height: 100vh;
}

.box {
    padding: 20px;
}

pre {
    margin-top: 36px;
}

pre:first-child {
    margin-top: 0px;
}

code {
    white-space: pre-wrap;
}

JavaScript(核心代码)

function publicFn(elStr, lang) {
    let pre = document.createElement("pre"),
        code = document.createElement("code");

    code.setAttribute("id", \`\${lang}_box\`);
    code.classList.add("hljs");
    code.classList.add(\`language-\${lang}\`);
    pre.appendChild(code);
    box.appendChild(pre);

    let el = document.querySelector(\`#\${lang}_box\`);

    publicChage();

    function publicChage() {
        const str = elStr.charAt(i);
        el.textContent += str;

        i++;

        if (i < elStr.length) {
            setTimeout(publicChage, timeNum);
        } else {
            i = 0;
            const result = hljs.highlight(elStr, { language: lang });

            el.innerHTML = result.value;
            setTimeout(() => {
                initFnRun(1, lang);
            }, 1000 \* 1);
        }
    }
}

总结: