任务地址：http://ife.baidu.com/course/detail/id/98

代码：

 <!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]

     ……

   ]

   */     var aLi = document.getElementsByTagName('li');

     var data = [];

     for( var i=0;i<aLi.length;i++ ) {

         var text = aLi[i].innerText;

         var node = [ text.slice(0,2),text.slice(-2) ];

         data.push(node);

     }

   return data;

 }

 /**

  * sortAqiData

  * 按空气质量对data进行从小到大的排序

  * 返回一个排序后的数组

  */

 function sortAqiData(data) {

     data.sort(function( a1,a2 ) {

         return a2[1] - a1[1];

     });

     return data;

 }

 /**

  * render

  * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中

  * 格式见ul中的注释的部分

  */

 function render(data) {

     var oUl = document.getElementById('resort');

     for( var i=0;i<data.length;i++ ) {

         var aLi = document.createElement('li');

         var oB = document.createElement('b');

         aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + '，空气污染指数是： ';

         oB.innerHTML = data[i][1];

         oUl.appendChild(aLi);

         aLi.appendChild(oB);

     }

 }   

 function btnHandle() {

   var aqiData = getData();

   aqiData = sortAqiData(aqiData);

   render(aqiData);

 }

 function init() {

   // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数

     var btn = document.getElementById('sort-btn');

     btn.onclick = function() {

         btnHandle();

     };

 }

 init();

 </script>

 </body>

 </html>

说明：

 function getData() {     var aLi = document.getElementsByTagName('li');

     var data = [];

     for( var i=0;i<aLi.length;i++ ) {

         var text = aLi[i].innerText;

         var node = [ text.slice(0,2),text.slice(-2) ];

         data.push(node);

     }

     return data;

 }

　　用slice()方法获取地区和雾霾指数

 function sortAqiData(data) {

     data.sort(function( a1,a2 ) {

         return a2[1] - a1[1];

     });

     return data;

 }

　　sort()方法中塞入比较函数

　　根据数组中的雾霾指数进行排序

 function render(data) {

     var oUl = document.getElementById('resort');

     for( var i=0;i<data.length;i++ ) {

         var aLi = document.createElement('li');

         var oB = document.createElement('b');

         aLi.innerHTML = '第' + (i+1) + '名 :' + data[i][0] + '，空气污染指数是： ';

         oB.innerHTML = data[i][1];

         oUl.appendChild(aLi);

         aLi.appendChild(oB);

     }

 }

　　依次写出数组，并追加元素

百度前端技术学院js任务三的更多相关文章

  1. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  2. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  3. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  4. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  7. 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

    HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...

  8. 百度前端技术学院-task1.8源代码以及个人总结

    通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...

  9. 百度前端技术学院task16源代码

    欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3 ...

随机推荐

  1. WEB安全_csrf攻击

    什么是xss跨站攻击? 正常访问服务器A,用户信任并在服务器A上登录操作,服务器A保存着用户的session数据,这时用户并没有退出服务器A的系统,然后访问危险服务器B,本来是用户请求服务器返回数据, ...

  2. 请求服务（RequestService）

    一个module中的web组件,负责将Service的结果按照适当的规范输出给前端.格式:http://server/moduleID/param0/param1/paramN/p.TYPE格式上包含 ...

  3. Unity DoTween 动画使用案例

    这边我就直接放一个标准的Dotween动画的使用demo吧. 这个案例满足应该可以完成你所想实现的几乎所有复杂动画. void PlayTween() { //set tween data float ...

  4. CU社区shell板块awk十三问整理

    CU社区shell板块awk十三问整理 一.RS="" 当 RS="" 时,会将\n强制加入到FS变量中,因为RS为空时,是将连续多空行作为分隔符,近似于\n\ ...

  5. Java POI读取Excel数据,将数据写入到Excel表格

    1.准备 首先需要导入poi相应的jar包,包括: 下载地址:http://pan.baidu.com/s/1bpoxdz5 所需要的包的所在位置包括: 2.读取Excel数据代码 package S ...

  6. java之Servlet监听器Listener

    常用应用场景:单点登录.统计在线人数 一.简介 (一)概述 1.Listener 用于监听 java web程序中的事件,例如创建.修改.删除Session.request.context等,并触发响 ...

  7. java之过滤器Filter （应用场景）

    filter在开发中的常见应用:     * 1.filter可以目标资源执行之前,进行权限检查,检查用户有无权限,如有权限则放行,如没有,则拒绝访问     * 2.filter可以放行之前,对re ...

  8. selenium模拟浏览器对搜狗微信文章进行爬取

    在上一篇博客中使用redis所维护的代理池抓取微信文章,开始运行良好,之后运行时总是会报501错误,我用浏览器打开网页又能正常打开,调试了好多次都还是会出错,既然这种方法出错,那就用selenium模 ...

  9. 浅谈python的对象的三大特性之封装

    我们家里都有电视机,从开机,浏览节目,换台到关机,我们不需要知道电视机里面的具体细节,只需要在用的时候按下遥控器就可以完成操作,这就是功能的封装. 在用支付宝进行付款的时候,只需要在用的时候把二唯码给 ...

  10. 使用xUnit为.net core程序进行单元测试(3)

    第1部分: http://www.cnblogs.com/cgzl/p/8283610.html 第2部分: http://www.cnblogs.com/cgzl/p/8287588.html 请使 ...