1.css文件：
<1>index.css
body {
font-family: 'Microsoft YaHei';
}
.wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
/* background:#8fd5f4; */
/* background: linear-gradient(#6bc6ee, #fff); */
background: #fff;
}
.search_form {
width: 640px;
margin: 100px auto 0;
}
.logo img {
display: block;
margin: 0 auto;
}
.form_group {
width: 640px;
height: 40px;
margin-top: 45px;
}
.input_txt {
width: 538px;
height: 38px;
padding: 0px;
float: left;
border: 1px solid #41a1cb;
outline: none;
text-indent: 10px;
}
.input_sub {
width: 100px;
height: 40px;
border: 0px;
float: left;
background-color: #41a1cb;
color: #fff;
font-size: 16px;
outline: none;
cursor: pointer;
position: relative;
}
.input_sub.loading::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('../img/loading.gif');
}
.hotkey {
margin: 3px 0 0 2px;
}
.hotkey a {
font-size: 14px;
color: #666;
padding-right: 15px;
}
.weather_list {
height: 200px;
text-align: center;
margin-top: 50px;
font-size: 0px;
}
.weather_list li {
display: inline-block;
width: 140px;
height: 200px;
padding: 0 10px;
overflow: hidden;
position: relative;
background: url('../img/line.png') right center no-repeat;
background-size: 1px 130px;
}
.weather_list li:last-child {
background: none;
}
/* .weather_list .col02{
background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
background-color: rgba(118, 113, 223, 0.8);
} */
.info_date {
width: 100%;
height: 40px;
line-height: 40px;
color: #999;
font-size: 14px;
left: 0px;
bottom: 0px;
margin-top: 15px;
}
.info_date b {
float: left;
margin-left: 15px;
}
.info_type span {
color: #fda252;
font-size: 30px;
line-height: 80px;
}
.info_temp {
font-size: 14px;
color: #fda252;
}
.info_temp b {
font-size: 13px;
}
.tem .iconfont {
font-size: 50px;
}
<2>reset.css
body,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
img {
border: 0px;
}
/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
2.图片文件
<1>line.png
<2>logo.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>天知道</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input onkeyup="search(event)" type="text" id="city" class="input_txt" placeholder="请输入查询的天气" />
<button class="input_sub" onclick="search(event)">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;">北京</a>
<a href="javascript:;">上海</a>
<a href="javascript:;">广州</a>
<a href="javascript:;">深圳</a>
</div>
</div>
<ul class="weather_list" id="myUL">
<!-- <li>
<div class="info_type"><span class="iconfont">多云</span></div>
<div class="info_temp">
<b>低温</b>
~
<b>高温</b>
</div>
<div class="info_date"><span>日期</span></div>
</li> -->
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//创建异步请对象
var xmlhttp = new XMLHttpRequest();
//点击搜索
function search(e) {
if (e.keyCode == 13 || e.type == 'click') {
//发送
//获取用户输入的城市名
var cityName = document.getElementById("city").value;
if (!cityName) {
alert("请输入城市名");
return; //直接结束掉
}
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
xmlhttp.send();
//准备接收后台响应的结果
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取后台返回的JSON字符串
var jsonStr = xmlhttp.responseText;
console.log(jsonStr);
//把JSON字符串转换成JSON对象
var jsonObj = JSON.parse(jsonStr);
//解析JSON数据展示到页面
var jsonArr = jsonObj.data.forecast;
parseJSON(jsonArr);
}
}
}
}
function parseJSON(jsonArr) {
var ul = document.getElementById("myUL");
//动态的创建li标签，li标签之间的数据，是从json中解析出来的，并且还要li标签放到ul之间
/*
<li>
<div class="info_type"><span class="iconfont">多云</span></div>
<div class="info_temp">
<b>低温</b>
~
<b>高温</b>
</div>
<div class="info_date"><span>日期</span></div>
</li>
*/
var li = '';
for (var i = 0; i < jsonArr.length; i++) {
var jsonEle = jsonArr[i];
li += `<li>
<div class="info_type"><span class="iconfont">${
jsonEle.type}</span></div>
<div class="info_temp">
<b>${
jsonEle.low}</b>
~
<b>${
jsonEle.high}</b>
</div>
<div class="info_date"><span>${
jsonEle.date}</span></div>
</li>`
}
ul.innerHTML = li;
}
</script>
效果如图：
