初次接触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 +"°C~" + result.showapi_res_body.f1.day_air_temperature+"°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 下载。
提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。