任务地址：http://ife.baidu.com/course/detail/id/98
代码：
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>IFE JavaScript Task 01</title> 6 </head> 7 <body> 8 9 <ul id="source"> 10 <li>北京空气质量：<b>90</b></li> 11 <li>上海空气质量：<b>70</b></li> 12 <li>天津空气质量：<b>80</b></li> 13 <li>广州空气质量：<b>50</b></li> 14 <li>深圳空气质量：<b>40</b></li> 15 <li>福州空气质量：<b>32</b></li> 16 <li>成都空气质量：<b>90</b></li> 17 </ul> 18 19 <ul id="resort"> 20 <!-- 21 <li>第一名：北京空气质量：<b>90</b></li> 22 <li>第二名：北京空气质量：<b>90</b></li> 23 <li>第三名：北京空气质量：<b>90</b></li> 24 --> 25 26 </ul> 27 28 <button id="sort-btn">排序</button> 29 30 <script type="text/javascript"> 31 32 /** 33 * getData方法 34 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量 35 * 返回一个数组，格式见函数中示例 36 */ 37 function getData() { 38 /* 39 coding here 40 */ 41 42 /* 43 data = [ 44 ["北京", 90], 45 ["北京", 90] 46 …… 47 ] 48 */ 50 var aLi = document.getElementsByTagName('li'); 51 var data = []; 52 for( var i=0;i<aLi.length;i++ ) { 53 var text = aLi[i].innerText; 54 var node = [ text.slice(0,2),text.slice(-2) ]; 55 data.push(node); 56 } 57 return data; 58 } 59 60 /** 61 * sortAqiData 62 * 按空气质量对data进行从小到大的排序 63 * 返回一个排序后的数组 64 */ 65 function sortAqiData(data) { 66 data.sort(function( a1,a2 ) { 67 return a2[1] - a1[1]; 68 }); 69 return data; 70 } 71 72 /** 73 * render 74 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中 75 * 格式见ul中的注释的部分 76 */ 77 function render(data) { 78 var oUl = document.getElementById('resort'); 79 for( var i=0;i<data.length;i++ ) { 80 var aLi = document.createElement('li'); 81 var oB = document.createElement('b'); 82 aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + '，空气污染指数是： '; 83 oB.innerHTML = data[i][1]; 84 oUl.appendChild(aLi); 85 aLi.appendChild(oB); 86 87 } 88 } 89 90 function btnHandle() { 91 var aqiData = getData(); 92 aqiData = sortAqiData(aqiData); 93 render(aqiData); 94 } 95 96 97 function init() { 98 // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数 99 var btn = document.getElementById('sort-btn'); 100 btn.onclick = function() { 101 btnHandle(); 102 }; 103 } 104 105 init(); 106 107 </script> 108 </body> 109 </html>
说明：
1 function getData() { 3 var aLi = document.getElementsByTagName('li'); 4 var data = []; 5 for( var i=0;i<aLi.length;i++ ) { 6 var text = aLi[i].innerText; 7 var node = [ text.slice(0,2),text.slice(-2) ]; 8 data.push(node); 9 } 10 return data; 11 }
用slice()方法获取地区和雾霾指数
1 function sortAqiData(data) { 2 data.sort(function( a1,a2 ) { 3 return a2[1] - a1[1]; 4 }); 5 return data; 6 }
sort()方法中塞入比较函数
根据数组中的雾霾指数进行排序
1 function render(data) { 2 var oUl = document.getElementById('resort'); 3 for( var i=0;i<data.length;i++ ) { 4 var aLi = document.createElement('li'); 5 var oB = document.createElement('b'); 6 aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + '，空气污染指数是： '; 7 oB.innerHTML = data[i][1]; 8 oUl.appendChild(aLi); 9 aLi.appendChild(oB); 10 11 } 12 }
依次写出数组，并追加元素