Menu
CoddyTech

Đồng hồ bấm giờ hoạt động

Bài học 9 trên 10 trong khóa học Dự án đồng hồ bấm giờ với HTML/CSS/JS của Coddy.

Giờ đây, khi đã có các nút bắt đầu và dừng hoạt động, đã đến lúc bắt đầu đếm!

Để đếm, chúng ta sẽ dùng một hàm JavaScript có tên là setInterval:

const interval = setInterval(func, milliseconds)

Hàm này nhận hai đối số: một hàm và một số biểu thị số mili giây. Hàm sẽ được gọi sau mỗi khoảng thời gian tương ứng với số mili giây đã cho.

Ví dụ:

let count = 0

function updateCount() {
	count += 1;
}

const interval = setInterval(updateCount, 1000)

Trong ví dụ trên, chúng ta tăng biến count thêm 1 sau mỗi giây.

Nếu muốn dừng một khoảng thời gian lặp, hãy dùng clearInterval cùng với giá trị trả về của setInterval:

const interval = setInterval(updateCount, 1000)
clearInterval(interval)
challenge icon

Thử thách

Trung bình

Thêm các tính năng sau vào tệp JS:

  • Khi nhấn nút bắt đầu/dừng, hãy đặt một khoảng thời gian lặp để cập nhật văn bản đồng hồ bấm giờ mỗi giây, tăng thêm một giây, đảm bảo định dạng chính xác.
  • Khi nhấn nút bắt đầu/dừng lần nữa, hãy xóa khoảng thời gian lặp đang chạy.

Sau khi thêm setInterval vào code, bạn cần nhấn nút đặt lại trong giao diện 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 Dự án đồng hồ bấm giờ với HTML/CSS/JS

1Giới thiệu

Tổng quan

4Phần JS

Bắt đầu và dừng cơ bảnBài học dự ánĐồng hồ bấm giờ hoạt độngBài học dự ánĐặt lạiBài học dự án

Tự luyện tập: Playground Web