使用p标签嵌套h标签出现的问题:
<p>
<h2>title</h2>
</p>
这个时候会被浏览器解析成
<p></p>
<h1>title</h1>
<p></p>
总结:p标签内只能嵌套内联元素,不能嵌套块元素,类似h1、div、ul块元素都不可自由嵌套在p标签内。强行嵌套元素,写的样式也不会生效。
JS数字滚动效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#root{
display: flex;
justify-content: center;
width: 50px;
padding: 10px;
font-size: 25px;
font-weight: 600;
border: 5px solid grey;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="root">0</div>
</body>
<script type="text/javascript">
function roll(total, idname, step) {
let n = 0;
return function () {
n = (n + step) >= total ? total : (n + step);
if (n <= total) {
document.getElementById(idname).innerHTML = n;
}
}
}
function start(index, idname, step, runtime = 1000){
let rolling = roll(index, idname, step)
runtime = (runtime >= 300) ? runtime : 1000;
for (let i = 0; i < (index/step); i++) {
let timer = setTimeout(rolling, (runtime/index)*i*step)
}
clearTimeout(timer);
}
start(100,'root', 4,)
</script>
</html>