初次接触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 {
margin:auto;
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
font-size: 30px;
color: #272625;
text-align: center; /*让div内部文字居中*/
background-color: #FF6A6A;
border-radius: 20px;
width: 460px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.main img{
vertical-align: middle;
}
</style>
</head>
<body >
<div class="main"><img id="day_weather_pic" style="height: 100%;"/><span id="day_weather"></span></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请求接口获取天气数据*/
$.ajax({
type: 'post',
url: 'http://route.showapi.com/9-2',
dataType: 'json',
data: {
"showapi_timestamp": formatterDateTime(),
"showapi_appid": 'xxxxx', //这里需要改成自己的appid
"showapi_sign": 'xxxxxxxxxxxxxxxxxx', //这里需要改成自己的应用的密钥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 text = ' ' + result.showapi_res_body.cityInfo.c3 + ' '
+ result.showapi_res_body.f1.day_weather + " "
+ result.showapi_res_body.f1.night_air_temperature
+"°C~" + result.showapi_res_body.f1.day_air_temperature+"°C";
document.getElementById("day_weather").innerHTML=text;
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 下载。
提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。