zoukankan      html  css  js  c++  java
  • 按照顺序排序

    任务目的

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

    任务描述

    • 参考以下示例代码,读取页面上已有的source列表,从中提取出城市以及对应的空气质量
    • 将数据按照某种顺序排序后,在resort列表中按照顺序显示出来
    <!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相关的知识
    • 请注意代码风格的整齐、优雅
    • 代码中含有必要的注释
    • 建议不使用任何第三方库、框架
    • 示例代码仅为示例,可以直接使用,也可以完全自己重写   
    • 代码如下所示
    • <!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元素)都会表现出来
  • 相关阅读:
    【语义未来】Twine和Scoutlabs揭示的冰山一角
    取舍之间:Keep Simple Keep Useful
    掌握激励组合拳的红色混混博客
    智能语义聚合框架:像人类一样收集和理解知识
    快车道不快的现象与人类误判心理学
    像Last.Fm去战斗,电台式的阅读体验?
    语义的未来【OpenSourceCamp讲稿】
    Spring 中 context:propertyplaceholder @Bean
    ${pageContext.request.contextPath}不能识别的问题
    Spring @Autowired 注解 指定自动装配
  • 原文地址:https://www.cnblogs.com/qianduangaoshou/p/6534965.html
Copyright © 2011-2022 走看看