背景介绍
为了使用户在 PC 端更加便捷的获取天气预报信息,许多生活服务类网站均添加了天气预报功能,本次试题将实现一周天气的查询与显示。
准备步骤
在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压所提供的天气预报基础代码:
wget https://labfile.oss.aliyuncs.com/courses/4450/exam07.zip && unzip exam07.zip && mv exam07/* ./ && rm -rf exam07*
下载完成之后,你可以看到目录结构如下:
├── images #图片资源
├── js #js 文件与 json 文件存放目录
├── index.html #天气预报页面
├── style.css #css文件
你可以参考下图中的 3 个步骤下载源码。同时,选中 index.html
右键启动 Web Server 服务( Open with Live Server ),让项目运行起来。
打开环境右侧的【Web 服务】,效果如下:
考试需求
-
补全
js/index.js
中 JavaScript 空缺代码,通过 jQueryajax
请求杭州一周天气预报数据。 -
API
接口地址 一周天气预报 js/weather.json
接口响应示例
- 将请求到的一周天气预报数据绑定到 HTML 中,最终效果图如下所示。
解题方法
1,HTML文件:因为获取会渲染天气数据导致模块重复,所以对其进行注释
<!DOCTYPE html>
<html>
<head>
<title>天气查询</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar">
<hearder class="title">天气查询</hearder>
<div class="dialog">
<div class="input-dialog">
<input type="text" name="input-weather" id="input-weather" placeholder="杭州">
</div>
</div>
</nav>
<article class="mainbody">
<section class="week-weather">
<!-- <div class="item" id="Monday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Tuesday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Wednesday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Thursday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Friday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Saturday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Sunday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div> -->
</section>
</article>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2,js文件
1,jQuery ajax请求数据的方法:
2,jQuery基础选择器,因为要在js中渲染页面
function getweather() {
//TODO:请补充代码
$.ajax({
url:'js/weather.json',
type:"GET",
dateType:'json',
success:function(res){
this.getList=res.result
console.log(this.getList)
$.each(this.getList,function(i,item){
var str=` <div class="item" >
<img src="${item.weather_icon}">
<div class="item-mess">
<div>${item.weather}</div>
<div>${item.temperature}</div>
<div>${item.winp}</div>
<div>
<span>${item.days}</span>
<span>${item.week}</span>
</div>
</div>
</div> `
$('.week-weather').append(str)
})
}
})
}
getweather();
希望对你有帮助哦~