百度前端技术学院js任务三

任务地址：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 }

　　依次写出数组，并追加元素

posted @ 2018-01-15 19:10  隐秀  阅读(393)  评论(0)  编辑  收藏  举报