Được đăng bởi :
Minh
|
Thứ Bảy, 23 tháng 7, 2011
|
22:00:00
Tạo đoạn text hiển thị ngẫu nhiên và luân phiên
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.
Ở 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."; /* */
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.
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ó 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.
Ở 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.
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.
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.
Ở 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.
Bạn đã xem chưa
- Đếm lượt xem bài viết bằng cookie
- Hướng dẫn tạo list game flash cho Blogspot
- Thủ thuật yêu cầu: Script liệt kê và gọi script
- Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar
- Hiển thị thời gian ước tính để đọc bài viết
- Mở rộng thành phần chứa nội dung bài viết
- Hiệu ứng đàn xếp trượt ngang sử dụng Javascript
- Tự động ẩn hiện thanh Navbar của Blogger
- Cách loại bỏ xung đột giữa hai javascript
- Tăng hoặc giảm cỡ chữ văn bản bằng Javascript
- Kỹ thuật load ảnh trước dùng Javascript
- Tạo Menu sổ dọc cơ bản sử dụng Javascript
- Tạo hiệu ứng mô tả liên kết chỉ bằng file Javascript
- Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript
0 nhận xét | Viết lời bình