-
Ở đâ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.
