Bài tập javascript 20 – Làm banner đếm ngược thời gian

0
10

Thu qua là đông, đông đi rồi xuân đến. Thế là sắp đến tết rồi :)) vậy nên trong bài tập này mình sẽ hướng dẫn các bạn làm banner đếm ngược thời gian đến tết :D. Để làm được bài tập này chúng ta cần sử dụng một số phương thức liên quan đến thời gian. Mình xin được bắt đầu bài tập

đếm ngược thời gian

Kiến thức cần có:

  1. Biến
  2. Câu lệnh if – else
  3. Mảng
  4. Hàm
  5. Event
  6. HTML DOM
  7. setInterval()

Bài tập javascript 20 – Làm banner đếm ngược thời gian

Mô tả bài tập: Thời gian cứ được đếm ngược cho đến tết thôi :v

Demo:

Click vào bài tập js 20 để xem kết quả.

Mình sẽ code và giải thích chi tiết ngay phía sau.

Code: html

Code:css

Code: js

Kết quả:

bài tập javascript

Giải thích:

  • Đầu tiên mình tạo ra một biến tet truyền vào biến thời gian dừng là tháng ngày năm giờ phút giây lúc giao thừa và lấy ra giây. Sau đó dùng phương thức getTime() lấy ra tổng số mili giây tính đến thời điểm đó.
  • Sử dụng phương thức setInterval(run,1000) cứ sau 1 giây chạy function run() 
  • Trong function run() Mình khởi biến now  truyền vào biến thời gian hiện tại bằng phương thức getDate() và lấy ra tổng số mili giây bằng phương thức getTime()
  • Khởi tạo biến timeRest để xác định số mili giây còn lại, và các biến day, hours , minute, sec mình đã chú thích chi tiết mấy cái này dưới code rồi.
  • Lấy được số tham số cần rồi thì truyền vào html thôi
  • Dùng hàm clearInterval() đề dừng khi đến tết 😀

Okê xong rồi đấy, vậy là chúng ta đã có một banner đếm ngược thời gian rồi. Mình sẽ trở lại với những hiệu ứng khác, mình xin được kết thúc bài viết tại đây.

Xem các bài tập khác tại đây

ĐỂ LẠI BÌNH LUẬN

Vui lòng nhập nội dung bình luận
Vui lòng nhập tên