ViệnVn - Blog lưu trữ tổng hợp

Thứ Hai, 2 tháng 2, 2015

[HTML5] Phương pháp hiển thị nội dung một cách ngẫu nhiên V1.1

Giả sử bạn có dãy số 1, 2, 3, 4, 5, 6, 7, 8, 9 hay 9 bài hát (bài 1, bài 2, bài 3,..., bài 9) và bạn muốn hiển thị dãy số hay các bài hát này một một cách ngẫu nhiên không theo thứ tự mỗi khi người xem truy cập vào trang blog/ web của bạn. Các đoạn mã sau đây sẽ giúp bạn thực hiện điều đó.

1/ Sao chép và dán đoạn mã dưới đây vào sau thẻ <head> hoặc trước thẻ </head>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
for (var $x=$(".content li"), i=$x.length-1, j, temp; i>=0; i--) { j=Math.floor(Math.random()*(i+1)), temp=$x[i], $x[i]=$x[j], $x[j]=temp; }
$x.each(function(i, li) { $(".content").append(li); });
});//]]>
</script>

2.a/ Để hiển thị dãy số một cách ngẫu nhiên, bạn viết đoạn mã dưới đây trong trình biên tập bài đăng bằng HTML

<div id="n"></div>
<ul class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

Xem minh họa: http://fiddle.jshell.net/fe7JL/3/show/ (Nhấp vào nút tải lại của trình duyệt, mỗi lần tải lại bạn sẽ thấy dãy số hiển thị một các khác nhau.

2.b/ Để hiển thị nội dung khác như bài hát chẵng hạn thì bạn thay 1, 2, 3, 4,... bằng mã nhúng bài hát từ Nhaccuatui, Zing MP3,.... Xem minh họa: http://fiddle.jshell.net/fe7JL/133/show/

Không có nhận xét nào:

Đăng nhận xét