标签：第十二 function 周周记 xmlhttp city YesterdayObj ele var
练习之天气预报
<script type="text/javascript">
var xmlhttp = new XMLHttpRequest();
function Sousuo(){
var city=document.getElementById("cityname").value;
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city="+city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var jsonStr=xmlhttp.responseText;
var JsonObj=JSON.parse(jsonStr);
showData(JsonObj);
}
}
}
function showData(jsonObj){
var TianqiShow=document.getElementById("Tianqi");
var YesterdayObj=jsonObj.data.yesterday;
var liStr2=`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${YesterdayObj.type}</span></div>
<div class="info_temp">
<b>${YesterdayObj.low}</b>
~
<b>${YesterdayObj.high}</b>
</div>
<div class="info_date"><span>${YesterdayObj.date}</span></div>
</li>`;
var arr=jsonObj.data.forecast;
var liStr1='';
for (var i = 0; i < arr.length; i++) {
var ele = arr[i];
liStr1 +=`<li v-for="item in weatherList">
<div class="info_type"><span class="iconfont">${ele.type}</span></div>
<div class="info_temp">
<b>${ele.low}</b>
~
<b>${ele.high}</b>
</div>
<div class="info_date"><span>${ele.date}</span></div>
</li>`;
}
TianqiShow.innerHTML=liStr2+liStr1;
}
function show(e) {
if (e.keyCode == 13) {
Sousuo();
}
}
function showcitys(th){
var id = th.id;
var city = document.getElementById(id).innerText;
xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city="+city, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var jsonStr=xmlhttp.responseText;
var JsonObj=JSON.parse(jsonStr);
showData(JsonObj);
}
}
}
</script>
<p> 请输入城市：</p >
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"></div>
<div class="form_group">
<input type="text" id="cityname" class="input_txt" placeholder="请输入查询的天气" οnkeypress="show(event)"/>
<button class="input_sub" οnclick="Sousuo()" on>
提交
</button>
</div>
</div>
<ul class="weather_list" id="Tianqi">
</ul>
</div>
标签：第十二,function,周周记,xmlhttp,city,YesterdayObj,ele,var 来源： https://blog.csdn.net/weixin_48999871/article/details/118344640
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。