Thủ thuật tạo textlink hiển thị ngẫu nhiên và nối tiếp nhau

Posted by on


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">
<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>
</div>
Lần lượt thay nội dung các đoạn text cần hiển thị ngẫu nhiên.
Các bạn có thể chèn chữ hoặc text link vào đây để hiển thị
2. Hiển thị text nối tiếp liên tục: Đặ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.
Chèn câu ca dao tục ngữ danh ngôn hoặc những gì bạn thích vào đây - 
Ở 2 code trên, bạn có thể tùy biến thêm CSS để làm cho khi hiển thị được đẹp mắt và phù hợ với website của bạn.
Nguồn: Tham khảo trên mạng.