Get Weather Forecast from webxml.com.cn

weather.user.js

// ==UserScript==
// @name           Weather Forecast
// @id             weather-forecast-dangoakachan@gmail.com
// @author         tuanutan <dangoakachan@gmail.com> 
// @homepageURL    http://dango-akachan.appspot.com
// @description    Get Weather Forecast from webxml.com.cn
// @include        http://*
// @include        https://*
// @version        0.3.2
// @updateURL      https://userscripts.org/scripts/source/90010.meta.js
// ==/UserScript==

(function() {
    var weather = {};
    var config = {
        city: '58457', //城市中文名称(国外城市可用英文)或城市代码(不输入默认为上海市)，如：杭州 或 58457
        day: 3,  // 1 <= day <=3
        position: {
            /*只要设置两个值,就可以确定位置
             *例如: left: '3px', bottom: '4px' 
             *表示相对于浏览窗口的左偏移为3px, 底偏移为4px
             */
            //left: '1px',
            //bottom: '0px'
            right:'1px',
            top:'0px'
        }
    };

    //function getText(nodelist) {
        //text = "";
        //for (var i = 0; i < nodelist.length; i++)
            //if (nodelist[i].nodeType == 3) // is a text node
                //text = text + nodelist[i].nodeValue;

        //return text;
    //}

    function getWeather() {
        var city = '';

        if (/\d+/.test(config.city))
            city = config.city;
        else
            city = encodeURIComponent(config.city);

        GM_xmlhttpRequest({
            method: 'GET',
            url: 'http://www.webxml.com.cn/webservices/weatherwebservice.asmx'+
                '/getWeatherbyCityName?theCityName='+city,
            onreadystatechange: function(responseDetails){
                if (responseDetails.readyState == 4) {
                    if (responseDetails.status == 200) {
                        // Create a DOM parser 
                        var parser = new DOMParser();
                        var dom = parser.parseFromString(responseDetails.responseText,
                            'application/xml');
                        var strings = dom.getElementsByTagName('string');

                        // Your Province and City
                        if (typeof weather.location == 'undefined') {
                            weather.location = {};
                        }

                        weather.location.province = strings[0].firstChild.nodeValue;
                        weather.location.city = strings[1].firstChild.nodeValue;
                        weather.location.code = strings[2].firstChild.nodeValue;

                        weather.updateTime = strings[4].firstChild.nodeValue;

                        // temperature and weather information
                        for (var i = 0, count = 5; i < 3; i++) {
                            var d = 'day'+i;

                            if (typeof weather[d] == 'undefined') {
                                weather[d] = {};
                            }

                            weather[d].temp = strings[count++].firstChild.nodeValue;
                            weather[d].text = strings[count++].firstChild.nodeValue;
                            weather[d].wind = strings[count++].firstChild.nodeValue;
                            weather[d].start_img = strings[count++].firstChild.nodeValue;
                            weather[d].stop_img = strings[count++].firstChild.nodeValue;

                            if (i == 0) {
                                weather[d].current = strings[count++].firstChild.nodeValue;
                                count++;
                            }
                        }

                        // process here
                        GM_setValue('weather', JSON.stringify(weather));
                        GM_setValue('lastChecked', encodeURIComponent(Date.now()/1000));

                        // display 
                        display();
                    } 
                }
            }
        });
    }

    function isTheSameCity(city) {
        if (typeof weather.location == 'undefined')
            return false;

        if (/\d+/.test(city))
            return city == weather.location.code;
        else
            return city == weather.location.city;
    }

    function display() {
        var w_main = document.getElementById('w_main');

        if (typeof weather.location == 'undefined')
            return;

        w_main.innerHTML = "<div id='w_caption'><span id='w_location'>位置: "+ 
            weather.location.province+' '+weather.location.city+"</span>"+
            "<span id='w_time'>更新时间: "+weather.updateTime+"</span>"+
            "<a id='w_close' style='float:right' href='javascript:;'>close(X)</a></div>";

        for (var i = 0; i < config.day; i++) {
            var d = 'day'+i;

            if (typeof weather[d] == 'undefined')
                return;
        
            if (i == 0)
                w_main.innerHTML += "<div id='w_current'><p>"+
                    weather.day0.current.replace(/：/,'</br>').replace(/；/g, '</br>')+"</p></div>";

            w_main.innerHTML += "<div id='w_day'><img src='http://www.webxml.com.cn/images/weather/a_"+
                weather[d].start_img+"'/><p id='w_text'>"+
                weather[d].text+"</br>"+
                weather[d].temp+"</br>"+
                weather[d].wind+"</p></div>";
        }

        w_main.style.display = 'block';

        var w_close = document.getElementById('w_close');
        w_close.addEventListener('click', function(e) {
            w_main.style.display = 'none';
        }, false);
    }

    function isDescendant(child, parent) {
        var node = child.parentNode;

        while (node != null) {
            if (node == parent)
                return true;
            
            node = node.parentNode;
        }

        return false;
    }

    function init() {
        var div = document.createElement('div');
        var myCSS = (<p><![CDATA[
                #w_main {
                    background: #ffffff;
                    color: #000000;
                    opacity: 0.85;
                    border-radius: 4px;
                    border: 1px solid #c8c8c8;
                    font-family: 'Microsoft YaHei', sans-serif;
                }
                #w_caption {
                    padding: 5px 2px;
                    margin-bottom: 3px;
                    border-bottom: 1px solid #c8c8c8;
                }
                #w_location {
                    padding: 0 5px;
                    text-align: center;
                }
                #w_close {
                    padding:0 4px;
                }
                #w_day{
                    float: left;
                    width: 120px;
                    display: inline-block;
                    padding: 2px 2px;
                    border-left: 1px solid #c8c8c8;
                }
                #w_current {
                    float: left;
                    width: 150px;
                    padding: 2px 4px;
                }
                #w_day p, #w_current p {
                    text-align:center;
                }
                #w_day img {
                    padding: 0 25px;
                }
                ]]></p>).toString();

        div.id = 'w_main';
        div.style.position='fixed';
        div.style.display = 'none';
        
        for (var i in config.position) {
            div.style[i] = config.position[i];
        }

        document.body.appendChild(div);
        GM_addStyle(myCSS);

        window.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.keyCode == 81) {
                // 这里还需要作个计时,免得查询太频繁
                var lastChecked = GM_getValue('lastChecked', 0);
                var dateTime = Date.now()/1000;
                weather = JSON.parse(GM_getValue('weather', '{}'));

                //限制最小查询时间为半小时
                //或者如果配置城市改变
                if ((dateTime - lastChecked) >= 3600*0.5 || !isTheSameCity(config.city)) {
                    getWeather();
                } else {
                    display();
                }
            }
        }, false);

        window.addEventListener('click', function(e) {
            if (div.style.display != 'none' && e.target != div &&
                !isDescendant(e.target, div)) {
                div.style.display = 'none';
            }
        },false);
    }

    init();
})();