[HTML5] Hiển thị nội dung ngẫu nhiên V3.0
Hơn thế nữa, bạn có thể tùy chỉnh theo ý muốn. Ví dụ: mỗi lần truy cập vào một bài đăng trên blog của bạn, bạn bè của bạn nghe 50 bài hát nhạc trẻ nhưng lần sau (cũng truy cập vào bài đăng này), họ lại nghe 50 bài hát trữ tình. Lần sau, họ lại nghe 50 bài rock cuồn nhiệt,... Thật dễ dàng với mã nguồn dưới đây:
Xem minh họa (yêu cầu trình duyệt hỗ trợ HTML5):
1. Ngẫu nhiên văn bản: http://jsfiddle.net/kimthuy900/w4x2bxkd/4/ (mỗi lần tải lại trang bạn sẽ thấy nó hiển thị tên một thành phố khác nhau)
2. Ngẫu nhiên bài hát (MP3/ HTML5): http://jsfiddle.net/kimthuy900/w4x2bxkd/5/ (mỗi lần tải lại trang bạn sẽ thấy nó hiển thị một bài hát khác nhau)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#randomize li').each(function(){
$(this).hide();
});
var min = 0;
var max = $('#randomize li').length;
var randomLi = Math.floor(Math.random() * (max - min)) + min;
$('#randomize li').eq(randomLi).show();
});
</script>
</head>
<body>
<div class="alert alert-success well">
<h3>Danh sách ngẫu nhiên</h3>
<strong id="whichLi"></strong>
<ul id="randomize">
<li> <span class="whichLi"></span>Sài Gòn </li>
<li> <span class="whichLi"></span>Hải Phòng </li>
<li> <span class="whichLi"></span>Đà Nẵng </li>
<li> <span class="whichLi"></span>Cần Thơ </li>
<li> <span class="whichLi"></span>Hà Nội </li>
<li> <span class="whichLi"></span>Vũng Tàu </li>
<li> <span class="whichLi"></span>Nha Trang </li>
<li> <span class="whichLi"></span>Hội An </li>
</ul>
</div>
</body>
</html>
- Bạn có thể kết hợp phương pháp này với phương pháp này để trông nó chuyên nghiệp hơn.
- Để chạy nhiều bài hát bạn tạo nhiều playlist, mỗi playlist có nhiều bài, nhúng mỗi playlist vào một bài đăng. Sau đó dùng <iframe> để nhúng các bài đăng này vào bài đăng chính của bạn (ví dụ: Bạn đặt tên bài đăng chính này là Kênh âm nhạc bất tận) bằng cách thay chữ Sài Gòn, Đà Nẵng, Hà Nội,... bằng mã nhúng iframe. Như vậy, mỗi khi truy cập vào bài đăng Kênh âm nhạc bất tận (ở trang chủ chẵng hạn), trình duyệt chỉ hiển thị một playlist, nhưng khi vào lại nó sẽ hiển thị một playlist khác,...
Không có nhận xét nào