Thêm tiện ích xem Thời gian và Thời tiết cho website


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'>
<span class='time'></span>
<span id='weather'></span>
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
.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>
      //<![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>
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>
<!-- Weather + Time -->
<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 + '&deg;' + 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 + '&deg;' + 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ú ý: Tìm quang ngai và thay thành nơi bạn ở.
Chúc bạn thành công!

5
4
3
2
1

Không có nhận xét nào:

Đăng nhận xét

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019