任务三

最新推荐文章于 2021-10-07 16:26:46 发布
最新推荐文章于 2021-10-07 16:26:46 发布
阅读量243 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shmily__/article/details/78425024
版权 
<!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">
  /*
  思路：先是要把ul-source中的内容读取出来，再把数组两个元素内容读取出来，放在数组里。
        对数组进行排序，得到一个排好序的数组。
        排好序以后，写时间，点击排序后输出数组，并且添加上相应内容
  */


/*var source=document.getElementById("source");//获得ul
//console.log(source.firstChild.firstChild.nodeValue);//北京空气质量: 是字符串
//alert(source.firstChild.firstChild);//是文本对象
//获取直接子节点数组
var sourceArr=source.childNodes;
console.log(sourceArr[0].firstChild.nodeValue);//获取到城市的值，接下来还是用slice方法处理
console.log(sourceArr[0].lastChild.innerText);//获取到每个城市的分数，再赋值给变量，取值。转换类型。赋值给数组 
*/


/** 第一部分
 * getData方法
 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
 * 返回一个数组，格式见函数中示例
 */
  var txt1="一二三四五六七";
  var li1=document.querySelectorAll("#source li");//获取nodelist innerText
  
function getData() {
    var data=[];
for(i=0;i<li1.length;i++){//ul1[0].innerText=北京空气质量：90
   var txt=li1[i].innerText;//接下来获取北京字符串和90数值
   var city=txt.slice(0,2).toString();
   var grade=parseInt(txt.slice(7));
   //console.log(city);
   // 如果把数组放在这里面，就只有最后一组值存在，为什么呢？作用域？？var arr=[];
   data[i]=[city,grade];
  
  } //第一步完成，得到了数组。

  return data;

}


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


/**第三部分
 * render
 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
 * 格式:<li>第一名：北京空气质量：<b>90</b></li>
 */
function render(data) {
var resort=document.getElementById("resort");//获得ul
for(i=0;i<data.length;i++){
var li2=document.createElement("li");//创建li元素节点
var bNode=document.createElement("b");//创建b元素节点 
//注意顺序，要先把txt01和02定义以后再使用，不然i=0时，会出现undefined
var txt01="第"+txt1.charAt(i)+"名: "+data[i][0]+"空气质量: ";//获得城市
var txt02=data[i][1];//获得分数
var litxtNode=document.createTextNode(txt01);//创建第一个文本节点li
var btxt=document.createTextNode(txt02);//创建第二个文本节点b

bNode.appendChild(btxt); 
li2.appendChild(litxtNode);
li2.appendChild(bNode);
resort.appendChild(li2);
//console.log(li2);第三部分完成，接下来是设置事件
}

}


 function btnHandle() {
  var aqiData = getData();//得到获取了城市和分数的数组
  aqiData = sortAqiData(aqiData);//调用函数，返回排好序的data
  console.log(aqiData);
  render(aqiData);//要输出内容的data数组
}


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

init();


</script>
</body>
</html><!DOCTYPE><!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">
  /*
  思路：先是要把ul-source中的内容读取出来，再把数组两个元素内容读取出来，放在数组里。
        对数组进行排序，得到一个排好序的数组。
        排好序以后，写时间，点击排序后输出数组，并且添加上相应内容
  */


/*var source=document.getElementById("source");//获得ul
//console.log(source.firstChild.firstChild.nodeValue);//北京空气质量: 是字符串
//alert(source.firstChild.firstChild);//是文本对象
//获取直接子节点数组
var sourceArr=source.childNodes;
console.log(sourceArr[0].firstChild.nodeValue);//获取到城市的值，接下来还是用slice方法处理
console.log(sourceArr[0].lastChild.innerText);//获取到每个城市的分数，再赋值给变量，取值。转换类型。赋值给数组 
*/


/** 第一部分
 * getData方法
 * 读取id为source的列表，获取其中城市名字及城市对应的空气质量
 * 返回一个数组，格式见函数中示例
 */
  var txt1="一二三四五六七";
  var li1=document.querySelectorAll("#source li");//获取nodelist innerText
  
function getData() {
    var data=[];
for(i=0;i<li1.length;i++){//ul1[0].innerText=北京空气质量：90
   var txt=li1[i].innerText;//接下来获取北京字符串和90数值
   var city=txt.slice(0,2).toString();
   var grade=parseInt(txt.slice(7));
   //console.log(city);
   // 如果把数组放在这里面，就只有最后一组值存在，为什么呢？作用域？？var arr=[];
   data[i]=[city,grade];
  
  } //第一步完成，得到了数组。

  return data;

}


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


/**第三部分
 * render
 * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
 * 格式:<li>第一名：北京空气质量：<b>90</b></li>
 */
function render(data) {
var resort=document.getElementById("resort");//获得ul
for(i=0;i<data.length;i++){
var li2=document.createElement("li");//创建li元素节点
var bNode=document.createElement("b");//创建b元素节点 
//注意顺序，要先把txt01和02定义以后再使用，不然i=0时，会出现undefined
var txt01="第"+txt1.charAt(i)+"名: "+data[i][0]+"空气质量: ";//获得城市
var txt02=data[i][1];//获得分数
var litxtNode=document.createTextNode(txt01);//创建第一个文本节点li
var btxt=document.createTextNode(txt02);//创建第二个文本节点b

bNode.appendChild(btxt); 
li2.appendChild(litxtNode);
li2.appendChild(bNode);
resort.appendChild(li2);
//console.log(li2);第三部分完成，接下来是设置事件
}

}


 function btnHandle() {
  var aqiData = getData();//得到获取了城市和分数的数组
  aqiData = sortAqiData(aqiData);//调用函数，返回排好序的data
  console.log(aqiData);
  render(aqiData);//要输出内容的data数组
}


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


init();


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

ccdida
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Multispectral Pedestrian Detection using Deep Fusion Convolutional Neural Networks （深度学习多光谱行人检测综述）
ylin01234的博客
07-18 2779
 Now, salient detection methods most of current pedestrian detectors explored color images of good lighting, and they are very likely to be stuck with images captured at night, due to bad visibility o...
【论文阅读】DA-RNN ＆ GeoMAN ＆ DSTP-RNN
weiwanshu的专栏
04-26 4983
NARX 和 注意力机制相关的论文，这三个论文的模型很像，放一起比较一下
【论文阅读】Deep Distributed Fusion Network for Air Quality Prediction
weiwanshu的专栏
02-26 1974
Deep Distributed Fusion Network for Air Quality Prediction 摘要：基于对大气污染的领域知识，提出了一种基于深度神经网络（DNN）的方法（Deep-air），该方法由空间变换组件和深度分布式融合网络组成。考虑到大气污染物的空间相关性，组件将空间稀疏的空气质量数据转换为一致的输入，以模拟污染物源。后一种网络采用神经分布式结构，融合城市异质数据...
【论文阅读】阅读计划和总结
weiwanshu的专栏
03-05 702
注意力机制PM2.5预测研究 GeoMAN，提出了一种空间局部注意力、空间全局注意力、时间注意力三层的机制【注意力机制实例】GeoMAN（一）论文阅读 对AQI进行空间插值，设计五个直接因素子网络（历史天气、天气预报、温湿度等等），预测300+城市的48小时天气情况【论文阅读】Deep Distributed Fusion Network for Air Quality Prediction ...
[深度学习从入门到女装]A Segmentation-aware Deep Fusion Network for Compressed Sensing MRI
炼丹师
12-13 765
论文地址：A Segmentation-aware Deep Fusion Network for Compressed Sensing MRI   这是ECCV2018上的一篇做脑部MRI重建和分割的论文 这个论文将两个任务CS-MRI重建和MRI脑部分割进行融合，使用两个任务相互之间互相改进 CS-MRI就是快速扫描低质量的MRI，速度快，但是清晰度没有MRI高，因此很多学者都在搞把C...
论文阅读-AOD
weiwanshu的专栏
02-20 1102
Fusion of Ground-Level Measurements with Aerosol Optical Depth Observations, a Case Study in North China 摘要：地面观测点和AOD融合的PM2.5预测方法精度受到PM2.5的时空分布和AOD数值丢失的影响。本文提出一种新的格网插值方法PMSI，利用贝叶斯Bayesian hierarchica...
国家开放大学Java语言程序设计形考任务3
最新发布
06-05
形考任务3作为课程的一部分，通常会涉及更深入的编程技巧和概念，例如异常处理、集合框架、多线程等。 在形考任务3中，学生可能需要完成以下几个方面的工作： 1. **异常处理**：Java中的异常处理是程序健壮性的...
形考任务三答案.zip
12-30
形考任务三答案.zip是一个与国开电大（国家开放大学）Visual Basic程序设计课程相关的学习资源包。这个压缩文件包含了形考任务三的答案，帮助学生理解和解决在实验4“菜单设计”或实验5“鼠标MouseMove事件应用”中...
国家开放大学《理工英语3》形考任务3参考答案.docx
01-22
《理工英语3》形考任务3的参考答案涵盖了商务沟通和一些英语语法点，同时也涉及到了环保主题。以下是对这些题目及其相关知识点的详细解析： 1. 商务对话中的专业表述： - 题目1询问公司的专长，正确答案B表明公司...
(2021年更新版)国家开放大学学习指南形考任务3答案.docx
10-21
国家开放大学学习指南形考任务3答案 本资源是关于国家开放大学学习指南形考任务3的答案，涵盖了国家开放大学学习网、课程考核方式、考试类型、学习过程等方面的知识点。 国家开放大学学习网 * 国家开放大学学习网...
国家开放大学基础会计形考任务三答案.docx
10-13
国家开放大学基础会计形考任务三答案.docx
百度前端技术学院—斌斌学院题库 转载 cristina-guan
diaofukuang5543的博客
03-29 206
Cristina_Guan https://github.com/CristinaGuan 博客园 首页 新随笔 联系 订阅 管理 ...
基础JavaScript练习（一）总结
aofamolii768992961的博客
03-07 96
任务目的 在上一任务基础上继续JavaScript的体验 接触一下JavaScript中的高级选择器 学习JavaScript中的数组对象遍历、读写、排序等操作 学习简单的字符串处理操作 任务描述 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来 &lt...
2019年，异质图神经网络领域有哪些值得读的顶会论文？
Paper weekly
12-12 1829
本文主要梳理了 2019 年各大顶会上关于异质图神经网络的论文，包括算法研究及应用研究。同时，作者也整理了相关大牛老师/论文/资料/数据集供大家学习。作者丨纪厚业学校丨北京邮电大学博士生...
AI实战：基于深度学习的空气质量预测模型开源代码汇总
Zack的博客
10-07 6313
基于深度学习的空气质量预测模型开源代码汇总 一、传统机理空气质量模型 空气质量模型是基于人类对大气物理和化学过程科学认识的基础上，运用气象学原理及数学方法，从水平和垂直方向在大尺度范围内对空气质量进行仿真模拟，再现污染物在大气中输送、反应、清除等过程的数学工具，是分析大气污染时空演变规律、内在机理、成因来源、建立“污染减排”与“质量改善”间定量关系及推进我国环境规划和管理向定量化、精细化过渡的重要技术方法。 二、基于深度学习的空气质量预测模型 ST-CausalConvNet A Spatiotempo
一个基于TensorFlow的简单故事生成案例：带你了解LSTM
技术博客
05-13 9906
在深度学习中，循环神经网络（RNN）是一系列善于从序列数据中学习的神经网络。由于对长期依赖问题的鲁棒性，长短期记忆（LSTM）是一类已经有实际应用的循环神经网络。
idea 自动生产序列吗_时间序列预测方法介绍——特征深度融合
weixin_39941732的博客
12-04 84
终于得知要开学的消息了，感谢山东教育厅的消息，近期阅读了几篇顶会论文，但私认为 西南交通大学，京东与西安电子科技大学合作的KDD会议论文 Deep Distributed Fusion Network for Air Quality Prediction（建议sci-hub下载，没有小伙伴可以私聊找我要），质量较高特此分享一下。 介绍： 这篇文章属于时间序列方向在空气质量预测的应用。论文...
原生js深入理解系列（三）--- 事件冒泡的分析以及如何防止事件冒泡
埃尔斯的博客
11-20 262
开发十年，就只剩下这套架构体系了！ >>> ...
百度前端技术学院—斌斌学院题库
weixin_34255055的博客
04-17 111
任务一：零基础JavaScript编码（一） 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。 课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不...
springboot定时任务3分钟
09-16
使用Spring Boot创建定时任务可以通过注解@Scheduled来实现。在你的Spring Boot项目的启动类上添加注解@EnableScheduling，这样就可以启用定时任务功能了。 在具体的定时任务方法上，你可以使用@Scheduled注解来指定定时任务的执行时间。根据你的需求，如果你想要定时任务每3分钟执行一次，可以在方法上添加注解@Scheduled(cron = "0 0/3 * * * ?")。 这个cron表达式的意思是，每隔3分钟执行一次定时任务。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值