<h2>近兩天天氣情況</h2>
  <div>
    <input type="text" id="province" value="河北">省
    <input type="text" id="city" value="邯鄲">市
    <button id="btn">查詢</button>
  </div>
  <table>
    <thead>
      <th>時間</th>
      <th>空氣</th>
 

      <th>溫度</th>
      <th>風向</th>
      <th>風力</th>
    </thead>
    <tbody id="tbody"></tbody>
  </table>
  <!-- 天氣列表模板 -->
  <script type="text/html" id="list">
    {{each list}}
    <tr>
      <td>{{dateFormat($value.update_time)}}
 
</td>
      <td>{{$value.weather}}</td>
      <td>{{$value.degree}}℃</td>
      <td>{{$value.wind_direction}}</td>
      <td>{{$value.wind_power}}級</td>
    </tr>
    {{/each}}
  </script>
  <script src="./jsonp.js"></script>
  <
 
script src="./template-web.js"></script>
  <script>
    // 日期處理格式
    function dateFormat(str) {
      // 20200510100000
      var arr = str.match(/\d{2}/g);
      return arr[0] + arr[1] + '年' + arr[2] + '月' + arr[3] + '日 ' + arr[4] + ':' + arr[5] + ':' + arr[6];

    }
    // 在模組引擎中模板中使用外部全域性變數
    template.defaults.imports.dateFormat = dateFormat;
    // 點選按鈕查詢
    btn.onclick = function () {
      // jsonp請求騰訊天氣
      jsonp({
        url: 'https://wis.qq.com/weather/common',
        data: {
          source: 'pc',
          weather_type: 'forecast_1h',
          province: province.value,
          city: city.value
        },
        success: function (data) {
          var html = template('list', { list: data.data.forecast_1h })
          tbody.innerHTML = html;
        }
      })
    }
    btn.onclick();
  </script>

解釋：