แปะ สภาพอากาศ ด้วย simpleweather ในเว็บ อย่างง่าย
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeeอากาศ jquery weather
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ อากาศ jquery weather
คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน
หรือไม่สามารถใช้งานได้แล้ว
ไปที่ Copy
บทความนี้ เป็นแค่ตัวอย่าง การใช้งาน simpleweather หรือการนำ
สภาพอากาศมาแสดงในเว็บไซต์ ในที่นี้จะใช้ในรูปแบบ ของการตรวจสภาพ
อากาศจากตำแหน่งปัจจุบัน ผ่าน geolocation
การประยุกต์ หรือการใช้งานในรูปแบบอื่นๆ ดูได้ที่เว็บต้นฉบับได้เลย
ดาวน์โหลดไฟล์ jquery.simpleWeather.min.js จากลิ้งค์ด้านบนได้เลย
เราจะใช้แค่ไฟล์ เดียว
ตัวอย่าง
โด้ดตัวอย่างสำหรับทดสอบ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style type="text/css"> @@@font-face { font-family: 'weather'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); font-weight: normal; font-style: normal; } #weather { width: 400px; margin: 0px auto; text-align: center; text-transform: uppercase; background: #1192d3; box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.1); } i { color: #fff; font-family: weather; font-size: 50px; font-weight: normal; font-style: normal; line-height: 1.0; } .icon-0:before { content: ":"; } .icon-1:before { content: "p"; } .icon-2:before { content: "S"; } .icon-3:before { content: "Q"; } .icon-4:before { content: "S"; } .icon-5:before { content: "W"; } .icon-6:before { content: "W"; } .icon-7:before { content: "W"; } .icon-8:before { content: "W"; } .icon-9:before { content: "I"; } .icon-10:before { content: "W"; } .icon-11:before { content: "I"; } .icon-12:before { content: "I"; } .icon-13:before { content: "I"; } .icon-14:before { content: "I"; } .icon-15:before { content: "W"; } .icon-16:before { content: "I"; } .icon-17:before { content: "W"; } .icon-18:before { content: "U"; } .icon-19:before { content: "Z"; } .icon-20:before { content: "Z"; } .icon-21:before { content: "Z"; } .icon-22:before { content: "Z"; } .icon-23:before { content: "Z"; } .icon-24:before { content: "E"; } .icon-25:before { content: "E"; } .icon-26:before { content: "3"; } .icon-27:before { content: "a"; } .icon-28:before { content: "A"; } .icon-29:before { content: "a"; } .icon-30:before { content: "A"; } .icon-31:before { content: "6"; } .icon-32:before { content: "1"; } .icon-33:before { content: "6"; } .icon-34:before { content: "1"; } .icon-35:before { content: "W"; } .icon-36:before { content: "1"; } .icon-37:before { content: "S"; } .icon-38:before { content: "S"; } .icon-39:before { content: "S"; } .icon-40:before { content: "M"; } .icon-41:before { content: "W"; } .icon-42:before { content: "I"; } .icon-43:before { content: "W"; } .icon-44:before { content: "a"; } .icon-45:before { content: "S"; } .icon-46:before { content: "U"; } .icon-47:before { content: "S"; } #weather h2 { margin: 0 0 8px; color: #fff; font-size: 30px; font-weight: 300; text-align: center; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); } #weather ul { margin: 0; padding: 0; } #weather li { color:#FFFFFF; padding: 5px; display: inline-block; border-radius: 5px; } #weather .currently { margin: 0 20px; } </style> </head> <body> <br> <div style="margin:auto;width:80%;"> <div id="weather"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="jquery.simpleWeather.min.js"></script> <script type="text/javascript" > $(function () { // รองรับการระบุตำแหน่ง จาก browser หรือไม่ // ปกติเปิดมาครั้งแรก ถ้ารองรับ บราวเซอร์จะขออนุญาต ใช้ตำแหน่ง // แนะนำให้เลือกเลือก allow if("geolocation" in navigator) { navigator.geolocation.getCurrentPosition(function(position) { // ถ้าสามารถใช้งานตำแหน่งได้ เรียกใช้ฟังก์ชั่นแสดงสภาพอากาศ // โดยระบุตำแหน่งปัจจุบันของเรา หรือเครื่องที่เราใช้งานอยู่ loadWeather(position.coords.latitude+','+position.coords.longitude); }); }else{ // ถ้าไม่รองรับ ให้ใช้ตำแหน่งเริ่มต้น โดยระบุไปเลยในทีนี้ใช้ bangkok loadWeather('bangkok',''); } }); function loadWeather(location, woeid) { $.simpleWeather({ location: location, woeid: woeid, unit: 'c', success: function(weather) { html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>'; html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; html += '<li class="currently">'+weather.currently+'</li>'; $("#weather").html(html); }, error: function(error) { $("#weather").html('<p>'+error+'</p>'); } }); } </script> </body> </html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()