Menu
CoddyTech

让它运行起来!

Coddy 圆形进度条 | 前端项目 课程的第 11 课,共 11 课。

在这里,我们将了解 JavaScript 代码的逻辑:它如何旋转圆形,以及如何计算百分比。

(提示中包含所有答案,但请先自己尝试,然后再查看提示。)

提醒一下,
要选中一个组件:

let component = document.querySelector(".some-class");

要更新组件的文本:

component.textContent = "new-text"

要更新组件的样式:

component.style.background = "#fff"
challenge icon

挑战

简单
  1. 首先,我们需要定位两个类:circular-progress 和 progress-value。此外,我们还需要存储三个独立的值,分别是起始值、结束值和速度。
  2. 所有流程都需要一个按特定速度调用的函数,为此,我们需要使用 setTimeout 函数。 
  3. 点击网页上的刷新按钮。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

圆形进度条 | 前端项目中的所有课

自己练习: Web 在线编辑器