会动的简历

核心代码

substring：方法用于提取字符串中介于两个指定下标之间的字符

setInterval：方法可按照指定的周期(以毫秒计)来调用函数或计算表达式

clearInterval：取消定时器

var texts = `/** 大家好，我是王伟超。* 这是我的简历。* */`;var n = 0;
var id = setInterval(function() {styles.innerHTML = texts.substring(0, n);code.innerHTML = texts.substring(0, n);if(n >= texts.length) {clearInterval(id);}n += 1;
}, 100)

代码高亮库

markdow cdn

同步、异步

var writeCode = function(prefix, texts, fn) {var n = 0;let tag = document.querySelector(".tag");var id = setInterval(function() {tag.innerHTML = Prism.highlight(prefix + texts.substring(0, n), Prism.languages.css, 'css');styles.innerHTML = prefix + texts.substring(0, n);tag.scrollTop = tag.scrollHeight;if(n >= texts.length) {clearInterval(id);fn();}n += 1;}, 10)
}writeCode('', texts, function() {createPro(() => {writeCode(texts, info_css, function() {markdow(md, () => {});});});
})function createPro(fn) {var n = 0;let creat_tag = document.createElement('pre');creat_tag.className = 'info';document.body.appendChild(creat_tag);fn.call();
}function markdow(markdow, fn) {let info = document.querySelector(".info");var n = 0;var id = setInterval(function() {info.innerHTML = marked(markdow.substring(0, n));info.scrollTop = info.scrollHeight;if(n >= markdow.length) {clearInterval(id);fn();}n += 1;}, 10)
}