代码练习（二维数组的定义，字符串加减，子元素的创建及绑定，排序算法） 

<!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() {
var source=document.getElementsByTagName("li");                                        //此处改成这样更好：var source=document.getElementById("source").getElementByTagName("li");
var number=document.getElementsByTagName("b");                                          
var data=new Array(7);
for(var i=0;i<data.length;i++) {data[i]=new Array(2);};                                //在JavaScript中定义二维数组
var i=0;
while(source[i])
{
  data[i][0]=source[i].innerText.replace(number[i].innerText,"");                       //字符串的加减用到replace函数
  data[i][1]=number[i].innerText;i++;
};
  return data;
}

function sortAqiData(data) {
var j=0,i;
while(j<6)                                                                               //将二维数组按照其中一位数字大小进行排序
{
i=j+1;
while(i<7)
{
   if(data[j][1]<data[i][1])
   {var temp=data[j];data[j]=data[i];data[i]=temp;}i++;
};j++;
};
return data;
}

function render(data) {
var i=0;
while(i<data.length)
{
  var wrote=document.createElement("li");i++;
  wrote.innerText="第"+i+"名"+data[i-1][0]+""+data[i-1][1];
  var resort=document.getElementById("resort");
  resort.appendChild(wrote);                                                              //注意，在绑定父元素子元素前，应先创建子元素，添加内容
  
}

}

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

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

}

init();

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

 

posted @ 2017-05-30 15:20  kkdf  阅读(324)  评论(0)  编辑  收藏  举报