按照顺序排序
任务目的
- 在上一任务基础上继续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相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 建议不使用任何第三方库、框架
- 示例代码仅为示例,可以直接使用,也可以完全自己重写
- 代码如下所示
-
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
<!
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)
与其还有相同作用的还有slice()和substr();方法,不同的是这两个可以接收负
参数 描述 start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。
如果省略该参数,那么返回的子串会一直到字符串的结尾。
- 定义数组,定义一维数组:var data=new Array();括号内为数组的长度,也可以省略不写,定义二维数组 var data[i]=new Array(),
这就相当于在data[i]的基础上又定义了一个新的数组,最终得到data[i][j]的形式数组
- innerText得到的是字符串,就是在不包括标签,而innerHTML则会将子元素内的所有东西(html元素)都会表现出来
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· 在外漂泊的这几年总结和感悟,展望未来
· 博客园 & 1Panel 联合终身会员上线
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· https证书一键自动续期,帮你解放90天限制
· 在 ASP.NET Core WebAPI如何实现版本控制?