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.
Lần lượt thay nội dung các đoạn text cần hiển thị ngẫu nhiên.width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">
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])
Chân lý cuối cùng của ở cuộc đời này là tình yêu có nghĩa là sống và sống là yêu - Voltaire
2. Hiển thị text luân phiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.
Lần lượt thay nội dung các đoạn text cần hiển thị luân phiên. Chú ý có
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);
}width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">rotator();
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 yêu, người ta thấy sự xa cách và thời gian chẳng là gì cả - Afred de Musset
Ở 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.