IFE_js_task02
来源：互联网 发布：大数据运维工作内容 编辑：程序博客网 时间：2024/06/16 22:59
任务目的
- 在上一任务基础上继续JavaScript的体验
- 学习JavaScript中的if判断语法，for循环语法
- 学习JavaScript中的数组对象
- 学习如何读取、处理数据，并动态创建、修改DOM中的内容
任务描述
- 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head><body> <h3>污染城市列表</h3> <ul id="aqi-list"><!-- <li>第一名：福州（样例），10</li> <li>第二名：福州（样例），10</li> --> </ul><script type="text/javascript">var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100]];(function () { /* 在注释下方编写代码 遍历读取aqiData中各个城市的数据 将空气质量指数大于60的城市显示到aqi-list的列表中 */})();</script></body></html>任务注意事项
- 实现简单功能的同时，请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 其中的数据以及60的判断逻辑可以自行设定
- 建议不使用任何第三方库、框架
- 示例代码仅为示例，可以直接使用，也可以完全自己重写
HTML:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>IFE JavaScript Task 01</title></head><body> <h3>污染城市列表</h3> <ul id="aqi-list"> </ul> <script type="text/javascript"> var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 50], ["成都", 90], ["西安", 100] ]; (function(){ aqiData.sort(function(a,b){ return b[1] - a[1]; // sort方法 返回负数时，第一个参数应该位于第二个参数之前，返回正数时，第一个参数应该位于第二个参数之后 /* aqiData.sort(function(value1,value2){ if (value1 < value2){ return -1; }else if (value1 > value2){ return 1; }else{ return 0; } }); */ }) var i = 0; var num_1 = ["一","二","三","四","五","六","七"]; for(var j = 0;j<aqiData.length;j++){ if(aqiData[j][1]>60) { var c = document.createElement("li"); var d = document.createTextNode("第"+num_1[i]+"名："+ aqiData[j][0]+","+aqiData[j][1]); c.appendChild(d); var e = document.getElementById("aqi-list"); e.appendChild(c); i++; } } })(); </script></body></html>
