Tự động lấy thông tin thời tiết bằng Javascript


Thông tin về thời tiết là một trong những widget hay được hiển thị nhất trên các website tin tức. Tuy vậy, có nhiều web master không biết cách làm widget này. Tôi thường thấy người ta “mượn tạm” các file javascript hoặc lọc nội dung trên các website nổi tiếng như VnExpress, Dân trí, … rồi hiện chúng trên website của mình. Cách làm như vậy khiến website của mình phụ thuộc vào các trang đó, đồng thời cũng khó tùy biến.

Bài viết này sẽ chia sẻ cho các bạn cách lấy thông tin dự báo thời tiết và hiển thị chúng trên website 1 cách đơn giản. Thông tin thời tiết này được lấy từ Yahoo! nên có thể đảm bảo độ chính xác và tin cậy.

Cách hiển thị thông tin thời tiết trên website

Để hiển thị thông tin thời tiết trên website, bạn chỉ cần chèn đoạn code sau vào trong thẻ
<head runat=”server”>
<script type=”text/javascript” src=”http://rilwis.googlecode.com/svn/trunk/weather.min.js”&gt;
</script>
</head>

Sau đó, ở vị trí bạn muốn hiển thị thông tin thời tiết, bạn chỉ cần chèn đoạn code:

 

<script type="text/javascript">
showWeather('hanoi, vietnam');
</script>


Nhớ thay ‘hanoi, vietnam’ bằng vị trí mà bạn muốn theo dõi thời tiết. Nó có dạng ‘city, country’ như mẫu trên.

Nếu bạn muốn hiển thị thông tin thời tiết cho nhiều thành phố thì chỉ cần gọi hàm showWeather() nhiều lần, như VD dưới đây, tôi sẽ hiển thị thông tin thời tiết của Hà Nội, Đà Nẵng và TP Hồ Chí Minh:

Code tương ứng:

 

<div id="weather">
 <h3>Thông tin thời tiết</h3>
 <h4>Hà Nội</h4>
 <script type="text/javascript">
  showWeather('hanoi, vietnam');
 </script>
 <h4>Đà Nẵng</h4>
 <script type="text/javascript">
  showWeather('danang, vietnam');
 </script>
 <h4>TP Hồ Chí Minh</h4>
 <script type="text/javascript">
  showWeather('hochiminh, vietnam');
 </script>
</div>

Bạn có thể copy trực tiếp code trên và chèn vào website để sử dụng luôn! Đối với Blogger, hãy tạo 1 widget HTML mới và paste đoạn code trên vào. Đối với WordPress, vào phần quản lý widgets, drag 1 text widget vào sidebar nào đó và paste đoạn code trên vào phần nội dung widget.

 

Để tùy biến cách hiển thị đẹp hơn, bạn nên bao bọc nó bằng 1 thẻ div (như trong VD trên) và dùng CSS để tùy chỉnh.


Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s