• 15、任务十五——数组对象遍历、读写、排序


    0、题目

    • 读取页面上已有的source列表,从中提取出城市以及对应的空气质量
    • 将数据按照从小到大顺序排序后,在resort列表中按照顺序显示出来

    1、解答过程

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="UTF-8">
     5     <title>IFE Task 15——零基础JavaScript编码(三)</title>
     6   </head>
     7 <body>
     8   <ul id="source">
     9     <li>北京空气质量:<b>90</b></li>
    10     <li>上海空气质量:<b>70</b></li>
    11     <li>天津空气质量:<b>80</b></li>
    12     <li>广州空气质量:<b>50</b></li>
    13     <li>深圳空气质量:<b>40</b></li>
    14     <li>福州空气质量:<b>32</b></li>
    15     <li>成都空气质量:<b>90</b></li>
    16   </ul>
    17   <ul id="resort">
    18     <!-- 
    19     <li>第一名:北京空气质量:<b>90</b></li>
    20     <li>第二名:北京空气质量:<b>90</b></li>
    21     <li>第三名:北京空气质量:<b>90</b></li>
    22      -->
    23   </ul>
    24   <button id="sort-btn">排序</button>
    25  <script type="text/javascript">
    26 var data=[]; 
    27 var chinese=["","","","","","",""];
    28
    29 /** 30 * getData方法 31 * 读取id为source的列表,获取其中城市名字及城市对应的空气质量 32 * 返回一个数组,格式见函数中示例 33 */ 34 function getData() { 35 var name=document.getElementById("source").getElementsByTagName("li"), 36 number=document.getElementById("source").getElementsByTagName("b"); 37 for(var i=0;i<7;i++){ 38 data[i]=[name[i].innerText.substring(0,2),number[i].innerHTML]; 39 } 40 return data; 41 } 42 /** 43 * sortAqiData 44 * 按空气质量对data进行从小到大的排序 45 * 返回一个排序后的数组 46 */ 47 function sortAqiData(data) { 48 data.sort(function(a,b){ 49 return a[1]-b[1]; 50 }) 51 return data; 52 } 53 /** 54 * render 55 * 将排好序的城市及空气质量指数,输出显示到id位resort的列表中 56 * 格式见ul中的注释的部分 57 */ 58 function render(data) { 59 var content=''; 60 for(var j = 0;j<7;j++){ 61 content+="<li>第"+chinese[j]+"名:"+data[j][0]+"空气质量:<b>"+data[j][1]+"</b></li>"; 62 } 63 document.getElementById("resort").innerHTML=content; 64 } 65 function btnHandle() { 66 var aqiData = getData(); 67   aqiData = sortAqiData(aqiData); 68   render(aqiData); 69 } 70 function init() { 71 // 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数 72 document.getElementById("sort-btn").onclick=btnHandle; 73 } 74 init(); 75 </script> 76 </body> 77 </html>

     2、遇到的问题

    (1)为得到source列表中的城市名使用了substring()方法截取字符串(如“北京空气质量”)的前两个字,如果存在城市名不是两个字,那么这个方法就不行了,因此可以用name[i].innerHTML.split("空气")[0]截取城市名  (split()方法把字符串分割为字符串数组)。

    (2)onclick调用函数

      ele.onclick=funcName 的意思就是在ele.onclick中保存了一个funcName方法的一个引用,类似于C语言中的函数指针。当click事件发生的时候,会调用funcName函数;

      (注:ele.onclick=function(){ funcName();}也可达到相同目的,适用于需要传递参数的情况)

      如果函数加了()就是执行函数了,也就是当eleonclick=funcName()时,ele.onclick获得的就是函数的返回值,即不论click事件发生与否,都会直接调用funcName函数。

  • 相关阅读:
    微信商城中使用微信支付接口获取用户地址
    微信支付开发流程
    沉默多年,重新开博
    Extjs 表单验证后,几种错误信息展示方式
    自己对Extjs的Xtemplate的忽略
    js execCommand
    支付宝支付
    C# 将短时间格式变长正常时间格式
    SortedDictionary
    sql操作
  • 原文地址:https://www.cnblogs.com/cjlalala/p/5808252.html
Copyright © 2020-2023  润新知