แปะ สภาพอากาศ ด้วย simpleweather ในเว็บ อย่างง่าย

17 September 2014 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

jquery weather อากาศ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery weather อากาศ

ดูแล้ว 7,685 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

บทความนี้ เป็นแค่ตัวอย่าง การใช้งาน simpleweather หรือการนำ

สภาพอากาศมาแสดงในเว็บไซต์ ในที่นี้จะใช้ในรูปแบบ ของการตรวจสภาพ

อากาศจากตำแหน่งปัจจุบัน ผ่าน geolocation

การประยุกต์ หรือการใช้งานในรูปแบบอื่นๆ ดูได้ที่เว็บต้นฉบับได้เลย

http://simpleweatherjs.com/

ดาวน์โหลดไฟล์ jquery.simpleWeather.min.js จากลิ้งค์ด้านบนได้เลย

เราจะใช้แค่ไฟล์ เดียว

ตัวอย่าง

โด้ดตัวอย่างสำหรับทดสอบ

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

<!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+'&deg;'+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>