第十二周周记

2023-12-16 20:19:39

练习之天气预报

<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>