IFE_js_task03

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量278 收藏
点赞数 1
分类专栏： IFE 文章标签： IFE javascript 遍历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39383751/article/details/78776653
版权

任务目的

  • 在上一任务基础上继续JavaScript的体验
  • 接触一下JavaScript中的高级选择器
  • 学习JavaScript中的数组对象遍历、读写、排序等操作
  • 学习简单的字符串处理操作

任务描述

  • 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
  • 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来
<!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>


HTML:
<!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">

var arr = [
    ["一"],
    ["二"],
    ["三"],
    ["四"],
    ["五"],
    ["六"],
    ["七"],
    ["八"],
    ["九"],
    ["十"]

];

/**
 * getData方法
 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
 * 返回一个数组，格式见函数中示例
 */
function getData() {
  /*
  coding here
  */

  /*
  data = [
    ["北京", 90],
    ["北京", 90]
    ……
  ]
  */
  var data = [];
  var ul_1 = document.getElementById("source");
  var li_1 = ul_1.getElementsByTagName("li");
  
  for(var i = 0;i<li_1.length;i++){
      var li = li_1[i];
      var city = li.innerHTML.split("：")[0];//冒号要用中文的：，因为要跟随原文的符号。
      var num = li.innerText.split("：")[1];
      data.push([city,num]);

  }

  return data;

}

/**
 * sortAqiData
 * 按空气质量对data进行从小到大的排序
 * 返回一个排序后的数组
 */
function sortAqiData(data) {
    data.sort(function(a,b){
        return a[1] - b[1];
    })
    return data;
}

/**
 * render
 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
 * 格式见ul中的注释的部分
 */
function render(data) {
    var ul_2 = document.getElementById("resort");
    for(var i = 0;i<data.length; i++){
        var li_2 = document.createElement("li");
        li_2.innerHTML = "第"+arr[i] +"名：" + data[i][0]+ ":" + data[i][1];
        ul_2.appendChild(li_2);
    }
}

function btnHandle() {
  var aqiData = getData();
  aqiData = sortAqiData(aqiData);
  render(aqiData);
}

function init() {

  // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
  var btn = document.getElementById("sort-btn");
  btn.addEventListener("click",function(){
      btnHandle();
      btn.disabled = "true";
  })

}

init();

</script>
</body>
</html>


Achillesssss
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ife_spring_task
05-16
在给定的“ife_spring_task”项目中，我们可以看到一系列与Spring框架和可能的JavaScript相关的任务。尽管没有提供具体的任务细节，但我们可以基于这些标签和项目名来探讨Spring框架的任务调度以及JavaScript在Web...
ife_summer_task:百度训练营任务
05-21
在“ife_summer_task: 百度训练营任务”中，我们可以推测这是一项由百度主办的前端技术训练项目，旨在提升学员的前端开发技能，特别是CSS方面的能力。在这个任务中，学员可能需要通过实践来学习和掌握CSS的核心概念...
IFE-JS 任务一：零基础JavaScript编码（一）
橙煦媛的博客
03-14 490
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 01</title> </head> <body> <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label> <button id="button
15、任务十五——数组对象遍历、读写、排序
weixin_30437337的博客
08-25 101
0、题目 读取页面上已有的source列表，从中提取出城市以及对应的空气质量 将数据按照从小到大顺序排序后，在resort列表中按照顺序显示出来 1、解答过程 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <...
IFE_js_task02
Achillessssss的博客
12-10 191
任务目的 在上一任务基础上继续JavaScript的体验学习JavaScript中的if判断语法，for循环语法学习JavaScript中的数组对象学习如何读取、处理数据，并动态创建、修改DOM中的内容 任务描述 参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上 htm
2017ife_yaoyao学院_task1
xzbwx960731的博客
02-25 527
2017ife_yaoyao学院_task1任务：表单（一）单个表单项的检验 任务目的 加强对JavaScript的掌握 熟悉常用表单处理逻辑 任务描述 如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果 校验规则 1.字符数为4~16位 2.每个英文字母、数字、英文符号长度为1 3.每个汉字，中文符号长度为2 任务注意
2017ife_yaoyao学院_task2
xzbwx960731的博客
02-27 318
2017ife_yaoyao学院_task1 任务：表单（二）多个表单项的动态校验 任务目的加强对JavaScript的掌握 熟悉常用表单处理逻辑 任务描述如示例图中所示，基于上一个任务（任务29），在页面中添加多个表单要求: 1.表单获得焦点时，下方显示表单填写规则 2.表单失去焦点时校验表单内容 3.校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
IFE 2015_spring task0002 自学记录
amw198811的博客
02-25 125
JavaScript数据类型及语言基础 1. 判断arr是不是一个数组，返回一个bool值。 首先javascript有5大基本数据类型：Undefined，Null，Boolean，Number和String（双无BNS） 还有一个引用数据类型：Object，它包括以下三大类： Native Object（原生对象）: ECMAScript本身自带的对象，是在脚本运行环境中...
IFE JavaScript Task 03
datk74439的博客
02-28 125
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>IFE JavaScript Task 03</title> </head> <body> <ul id="source"> ...
ife2018 task2
qq_40890601的博客
05-14 149
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>resume</title> <style> ul.info {margin:0;padding:0;list-style:none
ife2018 task1
qq_40890601的博客
05-14 193
ife2018学习第一天 记得刚上大一的时候就被前端吸引了，短短几行代码就能马上看到效果，很新奇，但后来没好好找资源学习，导致荒废了许多时间，现在在ife学习希望自己可以坚持下去吧！ 阅读了学院给的参考资料没遇到什么问题，倒是注册GitHub的时候给我整的要死要死的，首先是页面慢得我耐心都没有了，而后是全英界面的Github太有挑战了，看了好几天也没弄懂这个GitHub具体要怎么用，Git又是什么工具？现在我还云里雾里，我这脑袋该不会是糨糊吧！***忌怀疑自己。 然后就是一个普通网站的访问过程，只有个大概的
IFE_Tasks-and-notes:百度前端技术学院的课程及笔记
05-08
IFE_Tasks-and-notes 百度前端技术学院的课程及笔记 Git Pages: 基础学院任务 第三天：做一个简单的简历，预览地址： 第五天&第六天：实现三种简历排版，预览地址： 简历1： 简历2： 简历3： 第七天&第八天：学习...
baidu-ife-task
05-05
【标题】"baidu-ife-task" 是一个与百度在线前端工程师实习挑战相关的项目，它包含了一系列的任务，旨在考察和提升参与者的JavaScript编程能力。这个项目可能是为了2015年春季的实习生招聘而设计的。 【描述】中的...
ife-ria-task1
05-18
IWA-team.github.io ##队员介绍下自己吧 昵称 github帐号 QQ 鸣鸣 957041561 111 111 111 ...我们是参加2015年百度暑期前端学习夏令营的WebApp杨帆班的一支队伍 ...建立一个Github的项目仓库，在这个项目中建立一个自己...
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 380
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 411
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 409
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 301
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
在camera中IFE与IPE的关系
05-19
在相机系统中，IFE代表的是图像前端处理单元（Image Front End），而IPE代表的是图像处理引擎（Image Processing Engine）。IFE和IPE是相机处理图像的两个核心模块，它们之间存在一定的关系。 IFE主要负责相机采集图像数据的前置处理，包括色彩处理、去噪、增强、锐化等操作。IFE的输出是经过预处理的RAW图像数据，通常是12位或14位的数据格式。这些预处理的图像数据被送往IPE进行进一步的处理。 IPE是相机中的主要处理单元，负责对IFE输出的RAW图像数据进行各种算法处理，如白平衡、色彩校正、降噪、锐化、曝光控制、自动对焦等。IPE输出的是经过处理的图像数据，通常是8位或10位的JPEG格式或其他图像格式。 因此，IFE和IPE在相机系统中是紧密相关的，IFE提供了IPE所需的输入数据，IPE则对IFE预处理过的数据进行进一步的处理，最终输出最终的图像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值