按照顺序排序

任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 接触一下JavaScript中的高级选择器
  • 学习JavaScript中的数组对象遍历、读写、排序等操作
  • 学习简单的字符串处理操作

任务描述

  • 参考以下示例代码,读取页面上已有的source列表,从中提取出城市以及对应的空气质量
  • 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来
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
<!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]
    ……
  ]
  */
 
  return data;
 
}
 
/**
 * sortAqiData
 * 按空气质量对data进行从小到大的排序
 * 返回一个排序后的数组
 */
function sortAqiData(data) {
 
}
 
/**
 * render
 * 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
 * 格式见ul中的注释的部分
 */
function render(data) {
 
}
 
function btnHandle() {
  var aqiData = getData();
  aqiData = sortAqiData(aqiData);
  render(aqiData);
}
 
function init() {
 
  // 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数
 
}
 
init();
 
</script>
</body>
</html>

  

任务注意事项

  • 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架
  • 示例代码仅为示例,可以直接使用,也可以完全自己重写   
  • 代码如下所示
  • 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
    <!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
             */
            var Oul= document.getElementById("source");
            var Oli=Oul.getElementsByTagName("li");
            var data= new Array();//此时应该调用全局变量
            //不要将其作为局部变量
     
            for(var i=0; i <Oli.length; i++) {
                data[i]=new Array();//定义二维数组
                var split=Oli[i].childNodes[0]
                    .substringData(0,2);
                var second=Oli[i].innerText.substring(7,9);
                data[i][1]=second;
                data[i][0]= split;
            }
                /*
             data = [
             ["北京", 90],
             ["北京", 90]
             ……
             ]
             */
          return data;
        }
     
        /**
         *
     
         sortAqiData
         *
     
         按空气质量对data进行从小到大的排序
         * 返回一个排序后的数组
         */
        function sortAqiData(data) {
            data.sort(function (a, b) {
                return b[1] - a[1];
            });
            return data;
        }
            /**
             *
             render
             *
             将排好序的城市及空气质量指数,输出显示到id位resort的列表中
             * 格式见ul中的注释的部分
             */
            function render(data) {
                for(var i=0;i<data.length;i++) {
                    var Oul = document.getElementById("resort");
                    var list = document.createElement("li");
                    Oul.appendChild(list);
                    list.innerHTML="第"+(i+1)+"名:"+data[i][0]+"空气质量:"+"<b>"+data[i][1]+"</b>";
                }
     
            }
     
            function btnHandle() {
                var aqiData = getData();
                aqiData = sortAqiData(aqiData);//排序工作
                render(aqiData);
                return aqiData;//返回排完序后的结果
            }
            function init() {
                var button=document.getElementById("sort-btn");
                button.onclick=function(){
                    btnHandle();
                };
                // 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数
            }
            init();
            /*click和onclick的区别是怎么样的,什么时候用click,什么时候用onclick;*/
    </script>
    </body>
    </html>

      笔记:

  • 获取子元素:childNodes[index]表明获取的是哪个子元素
  • 获得截取字符串:利用substring方法
  • stringObject.substring(start,stop)
    参数描述
    start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
    stop

    可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

    如果省略该参数,那么返回的子串会一直到字符串的结尾。

    与其还有相同作用的还有slice()和substr();方法,不同的是这两个可以接收负
  • 定义数组,定义一维数组:var data=new Array();括号内为数组的长度,也可以省略不写,定义二维数组  var data[i]=new Array(),

这就相当于在data[i]的基础上又定义了一个新的数组,最终得到data[i][j]的形式数组

  • innerText得到的是字符串,就是在不包括标签,而innerHTML则会将子元素内的所有东西(html元素)都会表现出来
posted @   张宁宁  阅读(790)  评论(0编辑  收藏  举报
编辑推荐:
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
阅读排行:
· 在外漂泊的这几年总结和感悟,展望未来
· 博客园 & 1Panel 联合终身会员上线
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· https证书一键自动续期,帮你解放90天限制
· 在 ASP.NET Core WebAPI如何实现版本控制?
点击右上角即可分享
微信分享提示