<!DOCTYPE>

<html>

<head>

    <meta charset="utf-8">

    <title>task15</title>

    <style type="text/css">

    * {

        font: "微软雅黑";

    }

    </style>

</head>

    <body>

        <ul id="source">

            <li>北京空气质量：<b></b></li>

            <li>上海空气质量：<b></b></li>

            <li>天津空气质量：<b></b></li>

            <li>广州空气质量：<b></b></li>

            <li>深圳空气质量：<b></b></li>

            <li>福州空气质量：<b></b></li>

            <li>成都空气质量：<b></b></li>

        </ul>

        <ul id="resort">

        </ul>

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

        <script type="text/javascript">

            function getData() {

                var ul = document.getElementById("source");

                var data = [];

                for (var i = ; i < ul.childElementCount; i++) {

                    var li = ul.children[i];

                    //把一个字符串分割成字符串数组,并取出“空气质量：”前的字符

                    var strCity = li.innerHTML.split("空气质量：")[];

                    //把li对象下的第一个子元素的值转换为数字

                    var num = Number(li.children[].innerHTML);

                    //向data数组的末尾添加一个或多个元素，并返回新的长度

                    data.push([strCity, num]);

                }

                return data;

            }

            function sortAqiData(data) {

                data.sort(function(a, b) {

                    return a[] - b[];

                })

                return data;

            }

            function render(data) {

                var ul = document.getElementById("resort");

                var items = "";

                for (var i = ; i < data.length; i++) {

                    var aqiData = data[i];

                    //console.log(aqiData);

                    items += '<li>第' + (i + ) + '名' + aqiData[] + '空气质量：<b>' + aqiData[] + '</b></li>';

                }

                ul.innerHTML = items;

            }

            function btnHandle() {

                var aqiData = getData();

                aqiData = sortAqiData(aqiData);

                render(aqiData);

                var btn = document.getElementById("sort-btn");

                //函数调用时按钮为不可用状态

                btn.disabled = true;

            }

            function init() {

                var btn = document.getElementById("sort-btn");

                btn.onclick = btnHandle;

            }

            init();

        </script>

    </body>

</html>