MENU
前言
1、效果演示以视频为准，暂未录视频(敬请期待)；
2、私信或微信可获取完整代码(WX:MJ682517)
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);
}
}
}
html(基本代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码逐渐呈现</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<link rel="stylesheet" href="../../nodeModules/node_modules/highlight.js/styles/school-book.min.css">
</head>
<body>
<div class="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="./index.js"></script>
</body>
</html>