第233练最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>第233练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”container”><h1>Loading</h1><div class=”counter”>0%</div><hr class=”loading-bar-back” /><hr class=”loading-bar-front” /></div><script src=”index.js”></script></body></html>
CSS:
body {margin: 0;display: flex;justify-content: center;height: 100vh;align-items: center;background-color: black;color: lightgray;font-family: cursive;}.container {text-align: center;width: 400px;position: relative;}.counter {font-size: 40px;}.loading-bar-back {position: absolute;height: 8px;background-color: lightgray;width: 100%;border-radius: 5px;border: none;}.loading-bar-front {position: absolute;height: 8px;background-color: #00a6bc;width: 0%;border-radius: 5px;border: none;}
JS:
const counterEl = document.querySelector(“.counter”);const barEl = document.querySelector(“.loading-bar-front”);let idx = 0;updateNum();function updateNum() {counterEl.innerText = idx + “%”;barEl.style.width = idx + “%”;idx++;if (idx < 101) {setTimeout(updateNum, 20);}}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
