百度前端技术学院task15源代码
2024-08-31 22:55:25
这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件。
刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点。再通过schildNode[i].innerText即可获取去掉标签的内容。
<!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() {
var sdata=document.getElementById('source');
var data=[];
var schildNode=sdata.childNodes;//获取子节点数
var length=schildNode.length;
for (var i=0;i<length;i++){
if (schildNode[i].innerText)
{
var sarray=schildNode[i].innerText.split(":");//innerText可以去掉所有的标签
//使用split将字符串从冒号处分离
//也可以
//data.push([schildNode[i].innerHTML.slice(0, 7), schildNode[i].innerHTML.slice(10, 12)])
data.push(sarray)//可以直接将sarray数组放进去
}
}
return data;
} /**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
data.sort(function(pre,nex){
return nex[1]-pre[1];
})
return data;
} /**
* render
* 将排好序的城市及空气质量指数,输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
//没有采用创建节点的方式
function render(data) {
var resort=document.getElementById('resort');
var li="";
for(var i=0;i<data.length;i++){
li=li+"<li>"+"第"+(i+1)+"名:"+data[i][0]+":<b>"+data[i][1]+"</b></li>";
}
resort.innerHTML=li;//使用innerHTML的方法,将li输出到网页中 } function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
} function init() { // 在这下面给sort-btn绑定一个点击事件,点击时触发btnHandle函数
var sortBtn=document.getElementById('sort-btn');
//使用addEventListener,false表明是冒泡事件
sortBtn.addEventListener('click',function(){
btnHandle();
},false);
} init(); </script>
</body>
</html>
最新文章
- Android-修改TabWidget字体大小颜色及对齐
- iOS开发UI篇—核心动画(UIView封装动画)
- Oracle 异常处理汇总
- EF MYSQL 不能选择实体框架版本
- swift 创建桥接头文件
- 咱就入个门之NHibernate映射文件配置(一)
- CSS3与页面布局学习总结
- C# Delete Url Cookie
- 并行计算之Memory barrier(内存
- 与电子钱包相关的APDU指令
- BZOJ 2440 完全平方数(莫比乌斯-容斥原理)
- [置顶] ORACLE分析函数(1)
- Delta-wave
- C#中byte[]与string的转换
- MySql之ALTER命令用法详细解读(转)
- Windsock套接字I/O模型学习 --- 第一章
- 《CSS设计指南》阅读笔记
- Tomcat localhost 8080打不开
- Java堆和优先队列
- 《Python编程》课程报告 python技术在数据分析中的应用之网络爬虫
热门文章
- Windows 10 蓝牙管理页面";添加蓝牙或其他设备";选项点击无响应的解决方案
- oracle OCCI编程
- 《Android开发艺术探索》读书笔记之IntentFillter的匹配规则
- 6 Linux用户和用户组管理
- ECharts将折线变平滑和去掉点的属性(转载)曲线变圆滑
- ASP.NET----内置对象----Resuest
- 06. redis cluster
- centos7.2下安装python3.6.5
- django-orm 快速清理migrations缓存
- PacMan 03——追踪玩家