Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
[KiNg]_[PiN]-BB
•Bang Chủ•

[KiNg]_[PiN]-BB



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 chỉ sống được trong đau khổ, chỉ sống trong hạnh phúc tình yêu sẽ chết non - De Gurardin



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.






Xa cách ngắn ngủi khích động say mê nhưng xa cách lâu dài giết chết say mê - Charles De Saint





Ở 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.

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Báo cáo lạm dụng | Create your own blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải