首页 > 代码库 > 百度前端学院--斌斌学院--demo---3

百度前端学院--斌斌学院--demo---3

2024-11-03 21:00:02   204人阅读

 1 <!DOCTYPE html>
 2 <html>
 3     <!--
 4     作者：1991403547@qq.com
 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


联系
我们