需求:在网页上添加个天气预报。

  以前总是在需要执行js的地方,直接写function(){}。在需要同样功能的地方直接copy,或者稍微修改。

  然后在网上看看有没有好点的方法,然后就看到js面向对象编程,看了一些代码,感觉真不错。这些代码在以前做项目时也有看到过。当时只要能实现就忙于交差。没有多点的留意。

  于是,就想整理一下,以便以后提醒自己。

      js文件:

   AutoWeather.js

      

AutoWeather = function (config) {
    this.renderTo = config.renderTo || $(document.body); /*content*/
    this.render = typeof (this.renderTo) == "string" ? $("#" + this.renderTo) : $(this.renderTo); //渲染的控件
    this.city = config.city; //属性
    this.init();  //初始化
};

AutoWeather.prototype = {
    init: function () {
        var autoEntity = this;
        this.autoDate = $("<span id='autow-date'></span>");  //创建控件
        this.render.append(this.autoDate);
        this.autoWeather = $("<span id='autow-weather'></span>");
        this.render.append(this.autoWeather);
        $.ajax({
            type: 'post',
            url: 'PostWeather.ashx', //部署时,要虚拟路径 从网站根目录开始
            data: { city: autoEntity.city },
            dataType: "text",
            async: true, //true:异步 false:同步
            success: function (data) {
                var json = $.parseJSON(data);
                alert(data);
                $("#autow-date").text(json[0].formateDate);
                var s = json[0].weather + getNumberFromStr(json[0].temp1) + "-" + json[0].temp2;
                $("#autow-weather").text(s);
            }
        });
    }
    
};

function getNumberFromStr(value) {
    var reg = /d+/;
    var res = value.match(reg);
    return res;
}

        Handler文件:

//数据来自 中国气象网站的天气信息

public
void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string str = ""; string city = context.Request["city"];//城市编号 WebClient _client = new WebClient(); try { Stream objStream = _client.OpenRead("http://www.weather.com.cn/data/cityinfo/"+city+".html"); StreamReader _read = new System.IO.StreamReader(objStream, System.Text.Encoding.UTF8); string readStr = _read.ReadToEnd(); int startIndex = readStr.IndexOf(':')+2; str = "[{"formateDate":""+GetCurrentDate()+"","+readStr.Substring(startIndex, readStr.Length - startIndex-1)+"]"; } catch (Exception ex) { } context.Response.Write(str); } public string GetCurrentDate() { string[] Day = new string[] { "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" }; string preStr = DateTime.Now.ToString("yyyy年MM月dd日"); string endStr = Day[Convert.ToInt32(DateTime.Now.DayOfWeek.ToString("d"))].ToString(); return preStr + " " + endStr; }

   Html文件:

<head runat="server">
    <title></title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="AutoWeather.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var _weather = new AutoWeather({
                renderTo: "info",
                city: "101190201"  //无锡的编号
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
<!--显示天气的地方-->
<div id="info"> </div> </form> </body> </html>

       

          写下来,以后方便使用,和大家分享一下。