console
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="tianqiyubao.css">
</head>
<body>
<div class="main-div">
<div class="main-div-title">
<div class="div">
<select class="main-div-select" id="select_city"><option>北京</option><option>上海</option></select><span>日期:<span></span></span>
<div class="body">
<p>城市：<span></span></p>
<p>天气：<span></span></p>
<p>当前气温：<span></span></p>
<p>风向：<span></span></p>
<p>最高气温：<span></span></p>
<p>最低气温：<span></span></p>
<p>温馨提醒：<span></span></p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$("#select_city").change(function(){
switch ($(this).val()){
case "北京":
citykey_val="101010100";
break;
case "上海":
citykey_val="101020100";
break;
};
$.ajax({
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
data: {
citykey:citykey_val
},
dataType: 'json',
success: function (resp) {
console.log(resp);
var date_data=resp.data.forecast[0].date;
var data_len=date_data.substr(0,3);
var data_len_day=date_data.substr(3,3);
console.log(data_len_day);
var date1=new Date();
var dateMon=date1.getMonth()+1;
var dateDay=date1.getDay();
$(".div span span").html(dateMon+'月'+data_len+" "+data_len_day);
$('.body p:first-child span').html(resp.data.city);
$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);
$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");
$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);
$('.body p:nth-child(5) span').html(resp.data.forecast[0].high);
$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);
$('.body p:nth-child(7) span').html(resp.data.ganmao);
$('.forword ul').empty();
for(var i=0;i<resp.data.forecast.length;i++){
var str = resp.data.forecast[i].fengli;
var str_fengli=str.substring(9, str.length - 3)
var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";
$('.forword ul').append(forword_day);
}
}
})
})
$('#select_city').change();
</script>
</body>
</html>
.main {
width: 1200px;
margin: auto;
}
.main-div {
width: 400px;
height: 400px;
background: #66afe9;
margin: auto;
}
.main-div .main-div-title {
width: 100%;
height: 50px;
background: #46b8da;
line-height: 3;
}
.main-div .main-div-select {
width: 200px;
border: none;
margin-left: 30px;
}
p {
height: 20px;
}