为了账号安全,请及时绑定邮箱和手机立即绑定

这个函数btnHandle()该怎么理解?

<!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>
     -->
  </ul>

  <button id="sort-btn">排序</button>

<script type="text/javascript">

//通过元素匹配数组并提取其中需要的信息组成新的数组
function getData(){
  var data=[];
  var source=document.getElementById("source");
  var oli=source.getElementsByTagName("li");
  for (var i = 0; i <oli.length; i++) {
  	data.push(oli[i].innerHTML.replace(/(.*)空气质量:<b>([0-9]*)<\/b>/,'$1 $2').split(' '));
  }
  return data;
}

//将新数组data按照从大到小排序
function sortAqiData(data) {
	return data.sort(function(a,b){
		return b[1]-a[1]
	})
}

//将排序后的数组利用遍历写到指定位置
function render(data) {
	var resort = document.getElementById('resort');
  	data.forEach(function(item, index,array) {
    	resort.innerHTML += '<li>第' + (index + 1) + '名:' + item[0] + '空气质量:' + '<b>' + item[1] + '</b></li>';
  		});
	}

//定义onclick的属性值
function btnHandle() {
  var aqiData = getData();
  aqiData = sortAqiData(aqiData);
  render(aqiData);
}

//给按钮添加onclick属性和 值
function init() {
	var btn=document.getElementById("sort-btn");
	btn.setAttribute("onclick","btnHandle()");

}
init();

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

<--这个函数btnHandle()该怎么理解?-->

正在回答

1 回答

getDate()的作用是,将sourse里的数据,依次存在date[]的数组里面,这个函数涉及到了正则表达式,那部分可以先忽略;sortAqiDate()的作用是,将date数组里面的数据,按数字值从大到小排序,返回的是排好序的date数组;render()的作用就是在resort里将date数组里的数据按顺序innerHTML。。。。最后btnHandle()的作用就是把这上述三个函数依次调用了。。。

1 回复 有任何疑惑可以回复我~
#1

oldwan 提问者

这个是百度前端春季班的作业,btnHandle() 是作业中就给出来的,其他四个函数是我自己(看了别人作业的前提下)写的。大侠,最后一句 依次调用 能再说详细一点么? orz
2016-04-09 回复 有任何疑惑可以回复我~
#2

weibo_就叫Seven吧_0 回复 oldwan 提问者

这个要怎么解释,我感觉注释的挺清楚。。。首先,声明一个变量aqiData,获取getData()函数的返回值,即一个数组,然后把aqiData作为参数传递给 sortAqiData()函数,进行数组排序,返回值还是保存在aqiData中(即获得一个有序的数组),最后把这个有序的数组aqiData作为参数传递给render()函数,render函数在接收到参数后,循环遍历数组,以innerHTML的方式,在浏览器显示出来。。。本来要依次调用这三个函数,现在整合在一个函数里面,方便调用。。。不知道这是不是你要的答案?
2016-04-09 回复 有任何疑惑可以回复我~
#3

oldwan 提问者

非常感谢!
2016-04-11 回复 有任何疑惑可以回复我~
#4

oldwan 提问者 回复 weibo_就叫Seven吧_0

非常感谢,已经理解了你的解释,再追问一下,如果要依次调用这几个函数 该怎么分开写?
2016-04-11 回复 有任何疑惑可以回复我~
#5

weibo_就叫Seven吧_0 回复 oldwan 提问者

这个,我也算新手,如果不整合成一个函数调用,要我写就是嵌套调用。。。。意思和那个是一样的。。。函数这个东西一看函数干了啥,二看返回值是什么。。。我估计你可能对返回值的概念不是很清楚 function init() { var btn=document.getElementById("sort-btn"); btn.setAttribute("onclick","render(sortAqiData(getData()))"); }
2016-04-11 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       469023    人
  • 解答问题       22582    个

本课程从如何插入JS代码开始,带您进入网页动态交互世界

进入课程

这个函数btnHandle()该怎么理解?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号