让它运行起来!
Coddy 圆形进度条 | 前端项目 课程的第 11 课,共 11 课。
在这里,我们将了解 JavaScript 代码的逻辑:它如何旋转圆形,以及如何计算百分比。
(提示中包含所有答案,但请先自己尝试,然后再查看提示。)
提醒一下,
要选中一个组件:
let component = document.querySelector(".some-class");要更新组件的文本:
component.textContent = "new-text"要更新组件的样式:
component.style.background = "#fff"挑战
简单- 首先,我们需要定位两个类:
circular-progress和progress-value。此外,我们还需要存储三个独立的值,分别是起始值、结束值和速度。 - 所有流程都需要一个按特定速度调用的函数,为此,我们需要使用 setTimeout 函数。
- 点击网页上的刷新按钮。
亲手试试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 在这里编写 HTML 代码 -->
<script src="script.js"></script>
</body>
</html>圆形进度条 | 前端项目中的所有课
自己练习: Web 在线编辑器