Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn Thêm tiện ích xem Thời gian và Thời tiết cho website
HƯỚNG DẪN CÁCH LÀM:
Bước 1: Vào trang Chỉnh sửa HTML và thêm đoạn code này vào chỗ bạn muốn nó hiển thị (thường là header)<div class='timeandweather'>Bước 2: Tìm thẻ ]]></b:skin> và thêm css bên dưới lên nó hoặc thêm nó vào giữa cặp thẻ <style>...</style> điều được
<span class='time'></span>
<span id='weather'></span>
.time{display:inline-block;color:#ffffff;font-size:13px}
.time:before{content:"\f274";font-family:FontAwesome;margin-right:7px}
.time:after{content:" / ";margin:0 1em}
#weather{color:#ffffff;font-size:13px;}
#weather img{max-width:55px;vertical-align:middle;margin-top:-2px}
Bước 3: Tiếp đến tìm thẻ </head> và thêm đoạn js này lên trên thẻ vừa tìm<script>Bước 4: Bước cuối cùng bạn thêm đoạn js bên dưới lên trên thẻ </body>
//<![CDATA[
/*! simpleWeather v3.1.0 - http://simpleweatherjs.com */
!function(t){"use strict";function e(t,e){return"f"===t?Math.round(5/9*(e-32)):Math.round(1.8*e+32)}t.extend({simpleWeather:function(i){i=t.extend({location:"",woeid:"",unit:"f",success:function(t){},error:function(t){}},i);var o=new Date,n="https://query.yahooapis.com/v1/public/yql?format=json&rnd="+o.getFullYear()+o.getMonth()+o.getDay()+o.getHours()+"&diagnostics=true&callback=?&q=";if(""!==i.location){var r="";r=/^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(i.location)?"("+i.location+")":i.location,n+='select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="'+r+'") and u="'+i.unit+'"'}else{if(""===i.woeid)return i.error("Could not retrieve weather due to an invalid location."),!1;n+="select * from weather.forecast where woeid="+i.woeid+' and u="'+i.unit+'"'}return t.getJSON(encodeURI(n),function(t){if(null!==t&&null!==t.query&&null!==t.query.results&&"Yahoo! Weather Error"!==t.query.results.channel.description){var o,n=t.query.results.channel,r={},s=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW","N"],a="https://s.yimg.com/os/mit/media/m/weather/images/icons/l/44d-100567.png";r.title=n.item.title,r.temp=n.item.condition.temp,r.code=n.item.condition.code,r.todayCode=n.item.forecast[0].code,r.currently=n.item.condition.text,r.high=n.item.forecast[0].high,r.low=n.item.forecast[0].low,r.text=n.item.forecast[0].text,r.humidity=n.atmosphere.humidity,r.pressure=n.atmosphere.pressure,r.rising=n.atmosphere.rising,r.visibility=n.atmosphere.visibility,r.sunrise=n.astronomy.sunrise,r.sunset=n.astronomy.sunset,r.description=n.item.description,r.city=n.location.city,r.country=n.location.country,r.region=n.location.region,r.updated=n.item.pubDate,r.link=n.item.link,r.units={temp:n.units.temperature,distance:n.units.distance,pressure:n.units.pressure,speed:n.units.speed},r.wind={chill:n.wind.chill,direction:s[Math.round(n.wind.direction/22.5)],speed:n.wind.speed},n.item.condition.temp<80&&n.atmosphere.humidity<40?r.heatindex=-42.379+2.04901523*n.item.condition.temp+10.14333127*n.atmosphere.humidity-.22475541*n.item.condition.temp*n.atmosphere.humidity-6.83783*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)-5.481717*Math.pow(10,-2)*Math.pow(n.atmosphere.humidity,2)+1.22874*Math.pow(10,-3)*Math.pow(n.item.condition.temp,2)*n.atmosphere.humidity+8.5282*Math.pow(10,-4)*n.item.condition.temp*Math.pow(n.atmosphere.humidity,2)-1.99*Math.pow(10,-6)*Math.pow(n.item.condition.temp,2)*Math.pow(n.atmosphere.humidity,2):r.heatindex=n.item.condition.temp,"3200"==n.item.condition.code?(r.thumbnail=a,r.image=a):(r.thumbnail="https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/"+n.item.condition.code+"ds.png",r.image="https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/"+n.item.condition.code+"d.png"),r.alt={temp:e(i.unit,n.item.condition.temp),high:e(i.unit,n.item.forecast[0].high),low:e(i.unit,n.item.forecast[0].low)},"f"===i.unit?r.alt.unit="c":r.alt.unit="f",r.forecast=[];for(var m=0;m<n.item.forecast.length;m++)o=n.item.forecast[m],o.alt={high:e(i.unit,n.item.forecast[m].high),low:e(i.unit,n.item.forecast[m].low)},"3200"==n.item.forecast[m].code?(o.thumbnail=a,o.image=a):(o.thumbnail="https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/"+n.item.forecast[m].code+"ds.png",o.image="https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/"+n.item.forecast[m].code+"d.png"),r.forecast.push(o);i.success(r)}else i.error("There was a problem retrieving the latest weather information.")}),this}})}(jQuery);
//]]>
</script>
<!-- Weather + Time -->Chú ý: Tìm quang ngai và thay thành nơi bạn ở.
<script>
//<![CDATA[
$.simpleWeather({
location: 'viet nam, quang ngai',
woeid: '',
unit: 'c',
success: function(weather) {
html = '<span>' + weather.city + ' </span><img src="' + weather.thumbnail + '"><span> ' + weather.temp + '°' + weather.units.temp + '</span>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>' + error + '</p>');
}
});
$.simpleWeather({
location: 'viet nam, quang ngai',
woeid: '',
unit: 'c',
success: function(weather) {
for (var i = 4; i < weather.forecast.length; i++) {
html = '<img class="weather-image" src="' + weather.image + '">' + '<span class="weather-type">' + weather.currently + '</span><span class="weather-temp"> ' + weather.temp + '°' + weather.units.temp + '</span><span class="weather-date">' + weather.forecast[i].date + '</span><span class="weather-region">' + weather.city + ', ' + weather.country + '</span>';
}
html += '<span class="weather-humidity">' + weather.humidity + '%</span> ';
html += '<span class="weather-wind">' + weather.wind.speed + ' MPH</span>';
$("#weather-widget").html(html);
},
error: function(error) {
$("#weather-widget").html('<p>' + error + '</p>');
}
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var dayName=new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");var monName=new Array("1","2","3","4","5","6","7","8","9","10","11","12");var now=new Date();var str_time=dayName[now.getDay()]+', '+now.getDate()+'/'+monName[now.getMonth()]+'/'+now.getFullYear()+' '+now.getHours()+':'+now.getMinutes()+' GMT+7';$('.time').html(str_time);});
//]]>
</script>
Chúc bạn thành công!
