Khi thiết kế website hoặc webblog, đôi khi chúng ta cần hiển thị một chuỗi câu trích dẫn hay chuỗi câu danh ngôn nổi tiếng theo kiểu ngẫu nhiên để tạo sự nổi bật cho trang web. Trong trường hợp này có thể sử dụng ngôn ngữ JavaScript khá đơn giản để có được kết quả mong muốn.
Xem DEMO
Cấu trúc HTML cho website có dạng như sau:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hiển thị danh ngôn ngẫu nhiên</title>
<meta content="Huynh Nhat Ha" name="author" />
</head>
<body>
<div> >>>Đối với Blogger dùng từ dòng này
<p id="quoteWrapper"></p>
</div>
<script type="text/javascript">
var Quotes =
{
getRandomQuote: function()
{
var quote = [];
quote[0] = "When you have given nothing, ask for nothing.";
quote[1] = "Good habits result from resisting temptation.";
quote[2] = "If you bow at all, bow low.";
quote[3] = "Examine what is said, not him who speaks.";
quote[4] = "Make your bargain before beginning to plow.";
quote[5] = "Don't make use of another's mouth unless it has been lent to you.";
quote[6] = "Seize opportunity by the beard, for it is bald behind.";
quote[7] = "Be not afraid of growing slowly, be afraid only of standing still.";
quote[8] = "Do not employ handsome servants.";
quote[9] = "Do not remove a fly from your friend's forehead with a hatchet.";
var maxLength = quote.length;
var position = Math.floor(Math.random() * maxLength);
return Quotes.displayQuote("quoteWrapper", quote[position]);
},
displayQuote: function(ctl, quote)
{
ctl = document.getElementById(ctl);
ctl.innerHTML = quote;
}
};
Quotes.getRandomQuote();
</script> >>>Đối với Blogger kết thúc tại dòng này</body>
</html>
Chúng ta có thể thay đổi câu danh ngôn hay trích dẫn tùy ý, có thể tăng số lượng hiển thị ngẫu nhiên lên 10, 11, 12, ... n,...
Đối với Blogger, bạn chỉ cần dán đoạn code giữa 2 phần đánh dấu màu đỏ vào một tiện ích (widget) tại nơi bạn muốn hiển thị trên blog của bạn là xong.
Sau đây là một cách khác cũng khá giống với cách trên.
Chèn đoạn code dưới đây trước thẻ </head>.
<script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()
// QUOTATIONS
Quotation[0] = 'First quotation';
Quotation[1] = 'Second quotation';
Quotation[2] = 'Third quotation';
Quotation[3] = 'Fourth quotation';
Quotation[4] = 'Fifth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add as many quotations as you like';
var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];
setTimeout('rotateEvery('+sec+')', sec*1000);
}
</script>
Lưu ý bạn phải thay các quotation bằng câu danh ngôn bạn lựa chọn để hiển thị.
Thay thế thẻ <body> bằng thẻ: <body onload="rotateEvery(1)">.
Sau đó chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị trên web hay blog của bạn.
<div id="textrotator"><!--Quotations will be displayed here--></div>
Chúc bạn thành công!
More about →
Xem DEMO
Cấu trúc HTML cho website có dạng như sau:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hiển thị danh ngôn ngẫu nhiên</title>
<meta content="Huynh Nhat Ha" name="author" />
</head>
<body>
<div> >>>Đối với Blogger dùng từ dòng này
<p id="quoteWrapper"></p>
</div>
<script type="text/javascript">
var Quotes =
{
getRandomQuote: function()
{
var quote = [];
quote[0] = "When you have given nothing, ask for nothing.";
quote[1] = "Good habits result from resisting temptation.";
quote[2] = "If you bow at all, bow low.";
quote[3] = "Examine what is said, not him who speaks.";
quote[4] = "Make your bargain before beginning to plow.";
quote[5] = "Don't make use of another's mouth unless it has been lent to you.";
quote[6] = "Seize opportunity by the beard, for it is bald behind.";
quote[7] = "Be not afraid of growing slowly, be afraid only of standing still.";
quote[8] = "Do not employ handsome servants.";
quote[9] = "Do not remove a fly from your friend's forehead with a hatchet.";
var maxLength = quote.length;
var position = Math.floor(Math.random() * maxLength);
return Quotes.displayQuote("quoteWrapper", quote[position]);
},
displayQuote: function(ctl, quote)
{
ctl = document.getElementById(ctl);
ctl.innerHTML = quote;
}
};
Quotes.getRandomQuote();
</script> >>>Đối với Blogger kết thúc tại dòng này</body>
</html>
Chúng ta có thể thay đổi câu danh ngôn hay trích dẫn tùy ý, có thể tăng số lượng hiển thị ngẫu nhiên lên 10, 11, 12, ... n,...
Đối với Blogger, bạn chỉ cần dán đoạn code giữa 2 phần đánh dấu màu đỏ vào một tiện ích (widget) tại nơi bạn muốn hiển thị trên blog của bạn là xong.
Sau đây là một cách khác cũng khá giống với cách trên.
Chèn đoạn code dưới đây trước thẻ </head>.
<script language="JavaScript">
function rotateEvery(sec)
{
var Quotation=new Array()
// QUOTATIONS
Quotation[0] = 'First quotation';
Quotation[1] = 'Second quotation';
Quotation[2] = 'Third quotation';
Quotation[3] = 'Fourth quotation';
Quotation[4] = 'Fifth quotation';
Quotation[5] = 'Sixth quotation';
Quotation[6] = 'You can add as many quotations as you like';
var which = Math.round(Math.random()*(Quotation.length - 1));
document.getElementById('textrotator').innerHTML = Quotation[which];
setTimeout('rotateEvery('+sec+')', sec*1000);
}
</script>
Lưu ý bạn phải thay các quotation bằng câu danh ngôn bạn lựa chọn để hiển thị.
Thay thế thẻ <body> bằng thẻ: <body onload="rotateEvery(1)">.
Sau đó chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị trên web hay blog của bạn.
<div id="textrotator"><!--Quotations will be displayed here--></div>
Chúc bạn thành công!
