Làm cho nó chạy!
Bài học 11 trên 11 trong khóa học Thanh tiến trình hình tròn | Dự án front-end của Coddy.
Ở đây, chúng ta sẽ tìm hiểu logic của code JavaScript, cách code xoay một hình tròn và cách tính phần trăm.
(Các gợi ý đều có lời giải, nhưng bạn hãy thử tự làm trước rồi xem gợi ý.)
Nhắc lại,
Để chọn một thành phần:
let component = document.querySelector(".some-class");Để cập nhật văn bản của một thành phần:
component.textContent = "new-text"Để cập nhật kiểu của một thành phần:
component.style.background = "#fff"
Thử thách
Dễ- Đầu tiên, chúng ta cần chọn cả hai lớp:
circular-progressvàprogress-value. Ngoài ra, chúng ta cần lưu ba giá trị riêng biệt: giá trị bắt đầu, giá trị kết thúc và tốc độ. - Mỗi quy trình cần một hàm được gọi với tốc độ cụ thể. Để làm điều đó, chúng ta cần dùng hàm setTimeout.
- Nhấn nút làm mới trên trang web.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Viết code HTML ở đây -->
<script src="script.js"></script>
</body>
</html>Tất cả bài học trong Thanh tiến trình hình tròn | Dự án front-end
1Giới thiệu
Bạn sẽ tạo ra gì?4JavaScript
Làm cho nó chạy!
Tự luyện tập: Playground Web