百度前端学院--斌斌学院--demo---3
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度前端学院--斌斌学院--demo---3相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 作者：[email protected] 5 时间：2017-07-22 6 描述：demo3 7 --> 8 <head> 9 <meta charset="utf-8"> 10 <title>3</title> 11 </head> 12 <body> 13 <ul id="source"> 14 <li>北京 空气质量：<b>90</b></li> 15 <li>上海 空气质量：<b>70</b></li> 16 <li>天津 空气质量：<b>80</b></li> 17 <li>广州 空气质量：<b>50</b></li> 18 <li>深圳 空气质量：<b>40</b></li> 19 <li>福州 空气质量：<b>32</b></li> 20 <li>成都 空气质量：<b>90</b></li> 21 </ul> 22 <ul id="resort"></ul> 23 <button id="sort-btn">排序</button> 24 <script type="text/javascript"> 25 /** 26 * getData方法 27 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量 28 * 返回一个数组，格式见函数中示例 29 */ 30 function getData() { 31 var data = []; 32 var ulli = document.getElementById("source").getElementsByTagName("li"); 33 for(var i = 0; i < ulli.length; i++) { 34 var zl = ulli[i].innerHTML.split(" ", 1)[0]; 35 var numbers = ulli[i].children[0].innerHTML; 36 data.push([zl, numbers]); 37 } 38 return data; 39 } 40 /** 41 * sortAqiData 42 * 按空气质量对data进行从小到大的排序 43 * 返回一个排序后的数组 44 */ 45 46 //从小到大排列 47 function sortAqiData(data) { 48 data.sort(function(a, b) { 49 return b[1] - a[1]; 50 }); 51 52 return data; 53 54 } 55 /** 56 * render 57 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中 58 * 格式见ul中的注释的部分 59 */ 60 function render(data) { 61 var second_display = document.getElementById(‘resort‘); 62 for(var i = 0; i < data.length; i++) { 63 var li = document.createElement(‘li‘); 64 li.innerHTML = ‘第‘ + (i + 1) + ‘名：‘ + data[i][0] + ‘ 空气质量：‘ + ‘<b>‘ + data[i][1] + ‘</b>‘; 65 second_display.appendChild(li); 66 67 } 68 69 } 70 71 function btnHandle() { 72 var aqiData = getData(); 73 aqiData = sortAqiData(aqiData); 74 render(aqiData); 75 } 76 77 function init() { 78 var btn = document.getElementById("sort-btn"); 79 btn.onclick = function() { 80 btnHandle(); 81 } 82 // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数 83 84 } 85 86 init(); 87 </script> 88 </body> 89 90 </html>
思路是参考别人的；
以上是关于百度前端学院--斌斌学院--demo---3的主要内容，如果未能解决你的问题，请参考以下文章