1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
| <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</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 */
data = [ ["北京", 90], ["北京", 90] …… ] */ var data = new Array; var source = document.getElementById('source'); for( var i = 0; i<source.children.length; i++){ var city = source.children[i].innerText.slice(0,2); var number = source.children[i].children[0].innerText; var dataEach = new Array; dataEach.push(city); dataEach.push(number); data.push(dataEach); }
return data;
}
* sortAqiData * 按空气质量对data进行从小到大的排序 * 返回一个排序后的数组 */ function sortAqiData(data) { return data.sort(function(a,b){ return a[1] - b[1]; }) }
* render * 将排好序的城市及空气质量指数,输出显示到id位resort的列表中 * 格式见ul中的注释的部分 */ function render(data) { var resort = document.getElementById('resort'); var cnNo = ['一','二','三','四','五','六','七','八','九']; for (var i=0;i<data.length;i++){ var city = data[i][0]; var number = data[i][1]; var newli = document.createElement('li'); var text = document.createTextNode('第'+cnNo[i]+'名:'+city+'空气质量:'); var newb = document.createElement('b'); var textb = document.createTextNode(number); newb.append(textb); newli.append(text); newli.append(newb); resort.append(newli); } }
function btnHandle() { var aqiData = getData(); aqiData = sortAqiData(aqiData); render(aqiData); }
function init() {
}
init();
</script> </body> </html>
|