HTML 简单天气控件2

最新推荐文章于 2022-11-14 21:25:29 发布

zx_huang

最新推荐文章于 2022-11-14 21:25:29 发布

阅读量792

点赞数

分类专栏： HTML 文章标签： HTML Weather 天气

本文链接：https://blog.csdn.net/mai763727999/article/details/81083173

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初次接触html，之前做安卓的，从零开始边学边做。

自己写的简单天气控件。

数据来源：易源数据

在浏览器打开，如下形式：file:///D:/../../weather.html?area=101230201，area是地址id。

运行效果：

具体代码：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>   
    <style type="text/css">
        .main {         
            background-color: #FF6A6A;
            border-radius: 20px;
            width: 460px;
            height: 160px;           
        }
        #img{
            height:160px;
            width:180px;
            float:left;
            vertical-align: middle;
        }
        #weather{
            height:160px;
            width:140px;
            float:left;
            font-family: sans-serif, Arial, Verdana, "Trebuchet MS";          
            color: #272625;
            text-align: center;
        }
        #city{
            height:160px;
            width:120px;
            float:left;
            font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
            font-size: 30px;
            color: #272625;
            text-align: center;
        }
    </style>
</head>
<body >
    <div class="main">
        <div id="img"><img id="day_weather_pic" style="vertical-align: middle; height:160px; width:160px;" /></div> 
        <div id="weather">
            <p id="day_weather" style="font-size: 20px;"></p>
            <p id="day_wind_direction" style="font-size: 16px;"></p>
            <p id="day_air_temperature" style="font-size: 20px;"></p>
        </div>
        <div id="city">
            <p id="cityInfo"></p>
            <p id="day" style="font-size: 16px;">今天</p>
        </div>
    </div>  
    
    <script type="text/javascript">
        //以下代码仅为演示用,具体传入参数请参看接口描述详情页.
        //需要引用jquery库
        function formatterDateTime() {
            var date=new Date();
            var month=date.getMonth() + 1;
            var datetime = date.getFullYear()
                    + ""// "年"
                    + (month >= 10 ? month : "0"+ month)
                    + ""// "月"
                    + (date.getDate() < 10 ? "0" + date.getDate() : date
                            .getDate())
                    + ""
                    + (date.getHours() < 10 ? "0" + date.getHours() : date
                            .getHours())
                    + ""
                    + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
                            .getMinutes())
                    + ""
                    + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
                            .getSeconds());
            return datetime;
        }
        
        /*
        *函数功能：从href获得参数
        *sHref:   http://www.artfh.com/arg.htm?arg1=d&arg2=re
        *sArgName:arg1, arg2
        *return:    the value of arg. d, re
        */
        function GetArgsFromHref(sArgName)
        {
              var sHref=window.location.href;
              var args = sHref.split("?");
              var retval = "";

              if(args[0] === sHref) /*参数为空*/
              {
                   return retval; /*无需做任何处理*/
              }  
              var str = args[1];
              args = str.split("&");
              for(var i = 0; i < args.length; i ++)
              {
                  str = args[i];
                  var arg = str.split("=");
                  if(arg.length <= 1) continue;
                    if(arg[0] === sArgName) 
                        retval = arg[1]; 
              }
 //             document.getElementById("day_weather").innerHTML=retval;
              return retval;
        }
        

        var area = GetArgsFromHref("area");

        $.ajax({
            type: 'post',
            url: 'http://route.showapi.com/9-2',
            dataType: 'json',
            data: {
                "showapi_timestamp": formatterDateTime(),
                "showapi_appid": 'xxxxx', //这里需要改成自己的appid
                "showapi_sign": 'xxxxxxxxxxxxxxxxx',  //这里需要改成自己的应用的密钥secret
                "areaid":area,
                "area":"",
                "needMoreDay":"0",
                "needIndex":"0",
                "needHourData":"0",
                "need3HourForcast":"0",
                "needAlarm":"0"
            },

            error: function(XmlHttpRequest, textStatus, errorThrown) {
                alert("操作失败!");
            },
            success: function(result) {
                console.log(result); //console变量在ie低版本下不能用
                var day_air_temperature = result.showapi_res_body.f1.night_air_temperature +"&#176;C~" + result.showapi_res_body.f1.day_air_temperature+"&#176;C";
                document.getElementById("day_weather").innerHTML=result.showapi_res_body.f1.day_weather;
                document.getElementById("day_wind_direction").innerHTML=result.showapi_res_body.f1.day_wind_direction;
                document.getElementById("day_air_temperature").innerHTML=day_air_temperature;
                document.getElementById("cityInfo").innerHTML=result.showapi_res_body.cityInfo.c3;
                document.getElementById("day_weather_pic").src=result.showapi_res_body.f1.day_weather_pic;
                //alert(result.showapi_res_body.f1.day_weather);
            }
        });

    </script>
</body>
</html>

JQuery库：

引用方式：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>

下载：

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。

zx_huang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML 简单天气控件2

初次接触html，之前做安卓的，从零开始边学边做。自己写的简单天气控件。数据来源：易源数据在浏览器打开，如下形式：file:///D:/../../weather.html?area=101230201，area是地址id。运行效果：具体代码： &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;script...
复制链接

扫一扫