Ở đây tôi có một trang web với ảnh của Oh Noes,

đang sợ hãi vì sắp tới tận thế rồi,

chỉ còn 500 giây.

Tôi muốn cải tiến trang web này hơn một chút,

bằng cách biến số này thành một số đếm ngược,

để người dùng có thể xem xem còn chính xác bao nhiêu giây nữa.

Khi tạo hình động cho một trang web,

ta cần tìm element cần động,

và thay đổi element đó đi,

như ở đây là thay đổi số giây còn lại.

Bước đầu tiên là tìm số đếm ngược đấy theo id.

Đơn giản thôi.

[gõ...]

Bước thứ 2, tôi sẽ tạo một hàm để đếm ngược về 0.

[gõ...]
[typing]

Giờ ta sẽ

đặt text.Content, đặt cho bằng

số trước trừ 1.

Cái textContent này vốn thuộc kiểu string,

nên ta sẽ chuyển nó về kiểu số.

Ta đổi về kiểu số bằng hàm parseFloat().

Rồi trừ 1 từ số đó đi.

Cuối cùng ta sẽ cứ cách 1 quãng thời gian thì gọi hàm này để chạy,
Okay, so finally, we want to

tức là sẽ cứ mỗi giây chạy 1 lần.
which means a certain

Ta làm thế bằng hàm window.setInterval().

Hàm này sẽ nhận 2 argument:

hàm callback, và số milliseconds (0.001 giây) cần đợi

giữa mỗi lần gọi hàm callback kia.

Ta truyền hàm callback vào

cũng như lúc truyền hàm cho event listener vào: nhập tên hàm vào.

Giờ bạn thấy số đếm ngược đang nhanh quá,

bởi vì ta chưa nhập vào argument thứ 2,

tức là số millisecond cần đợi.

Ta muoosnd dợi 1 giây, nên sẽ nhập vào số 1000.

bởi vì 1000ms là 1s.

Thế là xong, giờ nó đang đếm ngược mỗi 1s rồi.

Chỉ còn có 490 giây thôi!

Còn một hàm window nữa mà ta cũng thường dùng ngoài setInterval(),

là hàm setTimeout().

Tôi sẽ sửa chỗ này đi thế, bạn xem có khác gì không.

Đợi 1 giây rồi.

Bạn thấy đây, khi dùng setTimeout

thì trình duyệt chỉ gọi hàm đó 1 lần, chứ không lặp lại.

Thế thì không hữu dụng lắm khi tạo hình động,

nhưng có thể hữu dụng trong trường hợp khác,

ví dụ như khi ta muốn trình duyệt hiện một cảnh báo ra cho người dùng

rồi sau 10s thì ẩn đi.

Tôi sẽ đổi cái này về lại setInterval.

Khi ta test hình động thế này,

ta cần kiểm tra kĩ xem từng điểm trong quá trình động sẽ thay đổi thế nào,

như là khi về 0 thì sẽ thế nào.

Mà đợi cái này về 0 thì lâu lắm,

chán ngấy ra mất, nên

ta sẽ sửa mốc ban đầu thành 5,

rồi xem xem.

4, 3, 2, 1, 0...

-1, -2,...

Thế này là không được rồi.

Khi hết giờ, tận thế rồi, thì cần có nổ "Kaboom" và không được đếm nữa.

Tức là ta sẽ cần dừng hình động này lại

khi chạm về số 0.

Ta sẽ thực hiện cái đó với điều kiện 'if' trong hàm này.

Tôi sẽ gán thời gian hiện tại vào một biến,

vì ta sẽ phải kiểm tra giá trị đó.

Tôi lấy cái này, đặt vào đây,

và sửa cái này thành currentTime.

Giờ tôi sẽ viết điều kiện if

để chỉ thay đổi dòng text nếu currentTime lớn hơn 0.

Khi lớn hơn 0 thì ta mới trừ 1 đi.

Tôi sẽ đặt cái này vào đây.

Thế này là được rồi, nhưng vẫn chưa hay lắm,

vì trình duyệt vẫn gọi hàm này 1 giây 1 lần

khi ta còn mở trang này (cho dù chữ không thay đổi nữa).

Ta không nên bắt trình duyệt làm việc thừa như thế.

Còn nhiều việc khác cần làm.

Vậy nên ta cần bảo trình duyệt là

khi về 0 rồi thì không cần gọi hàm này nữa.

Ta sẽ làm thế với hàm window.clearInterval().

Ta đặt thêm else vào đây... window.clearInterval().

Ta cần nhập vào 1 argument để nó biết là cần xoá interval nào,

bởi vì có những lúc ta lại cần xoá nhiều interval trong trang web.

Thế biết interval nào cần xoá

thì ta chỉ cần gán kết quả của setInterval() vào một biến.

Giờ là ta đã có một biến thời gian, tôi copy paste nó vào đây,

như vậy là biết được cần xoá interval nào khi về 0 rồi,

thế thì trình duyệt sẽ không gọi hàm kia nữa.

Với tất cả các hình động mà bạn viết, bạn cần để ỹ kĩ

về điều kiện để dừng chuyển động đó.

Cũng có những hình động mà bạn muốn chạy vô tận,

nhưng mà cần để ý kĩ.

Vì trình duyệt của bạn đang phải làm việc tốn tài nguyên mỗi khi gọi hàm callback về.

Tiếp teho ta sẽ cải tiến hình động này thêm nữa để cho giống tận thế thật.