IFE_js_task02
2024-06-30 03:37:00
任务目的
- 在上一任务基础上继续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>IFE_js_task02相关推荐
最新文章
- 面向固态激光雷达和惯导的里程计和建图
- Redux 学习笔记
- Pytorch：深度学习中pytorch/torchvision版本和CUDA版本最正确版本匹配、对应版本安装之详细攻略
- psql: FATAL: role “appleyuchi” does not exist与修改默认密码
- weblogic搭建
- ps中如何同图层获取css代码
- HDU 2303 The Embarrassed Cryptographer
- Python开发---报错：ImportError: cannot import name requests
- Spring Data JPA 常用 CRUD 操作汇总 及 关联关系（ 操作 h2 内存数据）
- 【2019南京icpc网络赛 I】Washing clothes【李超树】
- 当心路径层次太深，名字太长造成解压失败
- SVN汉化失败的原因及解决方案（通过SVN官网下载SVN和相应的汉化包）
- extjs 6.x 的使用
- 电商后台管理系统难点（2）
- 机器学习与分布式机器学习_机器学习-什么是机器学习？
- python详细教程#2下载python
- 真无线蓝牙耳机排名前十的品牌，公认佩戴舒适性好的蓝牙耳机分享
- 题目 2224: Glenbow Museum
- 映泰Hi-Fi B150S5 主板来电后电脑自动开机问题
- TestDirector概念