Như đã hứa, hôm nay tôi giới thiệu một bài viết về cách dùng javascript để ngẫu nhiên... đủ thứ.
Trước tiên, xem xét một tập tin html đơn giản sau:
| Mã lệnh |
<html>
<body> <script> data = new Array data[0] = 'morning' data[1] = 'afternoon' data[2] = 'evening' document.write(data[Math.floor(Math.random()*data.length)]) </script> </body> </html> |
Đoạn script trên sẽ chọn 1 phần tử ngẫu nhiên của mảng data và ghi ra màn hình. Bạn đương nhiên có thể thêm vào các phần tử số 3, 4... nữa.
Bây giờ ta tìm cách cải tiến đoạn trên theo các hướng:
- Đưa toàn bộ phần script (phần trong ) ra một tập tin random.js ở ngoài, sau đó gọi vào bằng cách . Làm như thế sẽ tiết kiệm thời gian tải, vì khi để ra ngoài nó sẽ được cached, nghĩa là chỉ tải về 1 lần, các trang tiếp sau dùng nó không cần tải lại.
- Dùng phương thức insertAdjacentHTML để chèn html vào nơi cần thiết, hoặc sửa đổi thuộc tính innerHTML. Tôi sẽ không trình bày ở đây, bạn có thể vào http://msdn.microsoft.com để tra cứu.
Tới đây, ta có thể áp dụng trong vài trường hợp.
1. Hình ngẫu nhiên
Tập tin random.js
| Mã lệnh |
data = new Array
data[0] = 'hinh1.jpg' data[1] = 'hinh2.jpg' data[2] = 'pfiev.gif' document.write('<img src="'+data[Math.floor(Math.random()*data.length)]+'">') |
Tập tin html
| Mã lệnh |
<html>
<body> Please view a picture <script src="random.js"></script> </body> </html> |
2. Nhạc nền ngẫu nhiên
Tập tin random.js sửa lại các hình thành các tập tin nhạc, dòng cuối sửa thành
document.write('
Tập tin html: chèn cái vào trước thẻ body.
3. Câu nói ngẫu nhiên
Tập tin random.js: các phần tử data chứa các câu nói, dòng cuối sửa thành
document.write(data[Math.floor(Math.random()*data.length)])[/code]
Tập tin html
| Mã lệnh |
<html>
<body> Quote: <i><script src="random.js"></script></i> </body> </html> |
Chúc các bạn thành công và áp dụng được trong nhiều trường hợp khác.