<!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">
function getData() {
var source = document.getElementById("source").getElementsByTagName("li");
var data=[];
for(var i=0;i<source.length;i++){
var city = source[i].innerHTML.slice(0,2);
var sum = source[i].childNodes[1].innerHTML; //子节点的0为text,所以为1
data.push([city,sum]);
}
return data;
}
function sortAqiData(data) {
data.sort(function(a,b){
return b[1]-a[1];
})
}
function render(data) {
var arr=['一','二','三','四','五','六','日'];
var resort = document.getElementById("resort");
for(var i=0;i< data.length;i++){
var lis = document.createElement("li");
lis.innerHTML = "第"+arr[i]+"名"+data[i][0]+"空气质量:"+"<b>"+data[i][1]+"</b>";
resort.appendChild(lis);
}
}
// 提取,排序,输出
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
var sortBtn = document.getElementById("sort-btn");
sortBtn.onclick=function(){
btnHandle()
}
}
init();
//问题1:通过形参来传递 参数
</script>
</body>
</html>
Yexiaomo
相关分类