其他分享
首页 > 其他分享> > 第十二周周记

第十二周周记

作者：互联网

练习之天气预报

<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