Tạo đoạn text hiển thị ngẫu nhiên và luân phiên

Trên blogspot của bạn, đôi khi bạn thích hiển thị một số dòng text thông báo hoặc một vài câu danh ngôn mà bạn tâm đắc. Hiệu ứng tạo text hiển thị ngẫu nhiên hoặc luân phiên sẽ giúp cho trang web trở nên sinh động và bớt đơn điệu hơn. Qua bài viết này mình sẽ giới thiệu bạn cách tạo 2 kiểu text như thế.

1. Hiển thị text ngẫu nhiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<div style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">
<!-- RANDOM QUOTES -->
<script type="text/javascript">
quotes = new Array()
quotes[0] = "Nội dung đoạn text 1"
quotes[1] = "Nội dung đoạn text 2"
quotes[2] = "Nội dung đoạn text 3"
quotes[3] = "Nội dung đoạn text 4"
quotes[4] = "Nội dung đoạn text 5"
quotes[5] = "Nội dung đoạn text 6"

randomquote = Math.random() * (quotes.length)
randomquote = Math.floor(randomquote)
document.write(quotes[randomquote])
</script>
<!-- RANDOM QUOTES -->
</div>

Lần lượt thay nội dung các đoạn text cần hiển thị ngẫu nhiên.

Tình yêu của các chàng trai không nằm ở trái tim mà nằm ở đôi mắt - Shakespeare

2. Hiển thị text luân phiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<!-- ROTATING QUOTES -->
<script type="text/javascript">
var index = 0;
quotes = new Array();
quotes[0] = "Nội dung đoạn Text 1";
quotes[1] = "Nội dung đoạn Text 2";
quotes[2] = "Nội dung đoạn Text 3";
quotes[3] = "Nội dung đoạn Text 4";
quotes[4] = "Nội dung đoạn Text 5";
quotes[5] = "Nội dung đoạn Text 6";

index = Math.random()*(quotes.length);
index = Math.floor(index);

function rotator() {
if (index == quotes.length) {index = 0;}
document.getElementById("rotation").innerHTML = quotes[index];
index++;
setTimeout("rotator();",5000);
}
</script>
<!-- ROTATING QUOTES -->
<div id="rotation" style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto"></div>
<script type="text/javascript">rotator();</script>

Lần lượt thay nội dung các đoạn text cần hiển thị luân phiên. Chú ý có thể thay đổi số 5000 tượng trưng cho 5 giây chỉ khoảng cách thời gian giữa các lần hiển thị text luân phiên.

Khi hai người yêu nhau, họ không nhìn nhau mà họ cùng nhìn về một hướng - Saint Exupery

Ở 2 code trên, bạn có thể tùy biến thêm CSS để tạo bản sắc riêng khi áp dụng cho blogspot của bạn.
Chúc các bạn thành công!

Posted in: Thủ thuật Blogspot