Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>任务三：零基础JavaScript编码（三）</title>
  </head>
  <body>
     <ul id="source">
      <li>北京空气质量：<b>90</b></li>
      <li>上海空气质量：<b>70</b></li>
      <li>天津空气质量：<b>80</b></li>
      <li>广州空气质量：<b>50</b></li>
      <li>深圳空气质量：<b>40</b></li>
      <li>福州空气质量：<b>32</b></li>
      <li>成都空气质量：<b>90</b></li>
    </ul>

    <ul id="resort">
      <!--
      <li>第一名：北京空气质量：<b>90</b></li>
      <li>第二名：北京空气质量：<b>90</b></li>
      <li>第三名：北京空气质量：<b>90</b></li>
       -->

    </ul>

    <button id="sort-btn">排序</button>

    <script type="text/javascript">
      /**
       * getData方法
       * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
       * 返回一个数组，格式见函数中示例
       */
      function getData() {
        /*
        coding here
        */
        var slist = document.getElementById('source').getElementsByTagName('li');
        var data = new Array();
        for(var i = 0; i < slist.length; i++){
          var city = slist[i].firstChild.nodeValue.split('空气质量：')[0];
          var num = slist[i].lastChild.innerHTML;
          data.push([city, num]);
        }

        /*
        data = [
          ["北京", 90],
          ["北京", 90]
          ……
        ]
        */

        return data;

      }

      /**
       * sortAqiData
       * 按空气质量对data进行从小到大的排序
       * 返回一个排序后的数组
       */
      function sortAqiData(data) {
        data.sort(function(a, b){
          return a[1] - b[1];
        })

        return data
      }

      /**
       * render
       * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
       * 格式见ul中的注释的部分
       */
      function render(data) {

        var arr = ['一', '二', '三', '四', '五', '六', '七'];
        var ul = document.getElementById('resort');
        for(var i = 0 ;i < data.length; i++){
          var li = document.createElement('li');
          li.innerHTML= '第' + arr[i] +'名：' + data[i][0] + '空气质量：' + '<b>' + data[i][1] + '</b>';
          ul.appendChild(li);

        }
      }
      function btnHandle() {
        var aqiData = getData();
        aqiData = sortAqiData(aqiData);
        render(aqiData);
        var button = document.getElementById('sort-btn');
        button.disabled = 'true';

      }

      function init() {

  // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
  var sortbtn = document.getElementById('sort-btn');
  sortbtn.onclick = function(){
    btnHandle();
  }


}

      init();

    </script>

  </body>
</html