B廠前端技術學院

時間  2019-11-19
標籤 前端 技術 學院 简体版
原文   原文鏈接

題庫javascript

bbTask1html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <label>請輸入北京今天空氣質量：<input id="aqi-input" type="text"></label>
  <button id="button">確認填寫</button>

  <div>您輸入的值是：<span id="aqi-display">尚無錄入</span></div>

<script type="text/javascript">

(function() {
  /*    
  在註釋下方寫下代碼
  給按鈕button綁定一個點擊事件
  在事件處理函數中
  獲取aqi-input輸入的值，並顯示在aqi-display中
  */
    document.getElementById('button').addEventListener('click',function () {

        var text = document.getElementById('aqi-input').value;
        document.getElementById('aqi-display').innerHTML = text;
        
    })
})();

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

bbTask2java

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <h3>污染城市列表</h3>
  <ul id="aqi-list">
<!--   
    <li>第一名：福州（樣例），10</li>
      <li>第二名：福州（樣例），10</li> -->
  </ul>

<script type="text/javascript">

var aqiData = [
  ["北京", 90],
  ["上海", 50],
  ["福州", 10],
  ["廣州", 50],
  ["成都", 90],
  ["西安", 100]
];

(function () {

  /*
  在註釋下方編寫代碼
  遍歷讀取aqiData中各個城市的數據
  將空氣質量指數大於60的城市顯示到aqi-list的列表中
  */
//   本身的思路
  for(var i = 0 ; i<aqiData.length; i++){
    //先把值遍歷出來
    if(aqiData[i][1]>60){
        document.getElementById('aqi-list').innerHTML+="<li>"+aqiData[i]+"</li>";
    }
  }


  //過濾寫法
  var ul = document.getElementById('aqi-list');
  var overData = aqiData.filter(function (a) {return a[1]>60});//過濾數組
   overData.sort(function (a,b) {//傳進兩個參數
      return b[1] - a[1];
    }) //排序數組 (從大到小)
    // console.log(overData);
    // var list = document.createElement('li');
    for(var i = 0; i<overData.length;i++){
        var list = document.createElement('li');//循環中create
        ul.append(list);
        list.innerHTML = overData[i];
    }
})();

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

bbTask3數組

<!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 source = document.getElementById('source').children;
     var data =[];
     for(var i=0; i<source.length; i++){
       data.push(source[i].innerText.replace(/空氣質量：/g,',').split(","));
       
     }
    //  console.log(array)
     return data;

}

/**
 * sortAqiData
 * 按空氣質量對data進行從小到大的排序
 * 返回一個排序後的數組
 */
function sortAqiData(data) {
    data.sort(function (a,c) {
        return a[1] - c[1];   
    })
    return data;
}

/**
 * render
 * 將排好序的城市及空氣質量指數，輸出顯示到id位resort的列表中
 * 格式見ul中的註釋的部分
 */
function render(data) {
    var ul = document.getElementById('resort');
    for(var i = data.length-1 ; i>=0 ;i--){
        var li = document.createElement('li');
        ul.append(li);
        li.innerHTML =data[i];
    }
}

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

function init() {

  // 在這下面給sort-btn綁定一個點擊事件，點擊時觸發btnHandle函數
  document.getElementById('sort-btn').addEventListener('click',btnHandle);
}

init();

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

task3的時候說實話是有卡住的，本身的思路是先從ul標籤下的每個li元素獲取li元素的innerText，而後在想辦法轉化爲數組，浪費了一點時間花在二維數組的轉化，以前卡住了，不過最後仍是大概地寫了出來，先把每個li下的字符串先replace掉無關內容，而後每個字符串再分隔爲兩個數組，再將所有的數組push到本身new的數組裏面，這樣就成功的轉變數組，而後就是把排序（從大到小），接着就是插入在新的ul標籤下。(排名沒作)app

bbtask4函數

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 04</title>
  </head>
  <style>
  span {
      margin-right: 5px;
      display:inline-block;
      height:30px;
      line-height: 30px;
      background-color: red;
      color:white;
      cursor: pointer;
  }
  </style>
<body>

  <input id="aqi-input" type="number"><button id="leftIn">左側入</button><button id="leftOut">左側出</button><button id="rightIn">右側入</button><button id="rightOut">右側出</button>
  <div id="queue">
  
  </div>  
<script type="text/javascript">

(function() {

    //leftIn
    function leftIn(queue) {
      var num =  document.getElementById('aqi-input').value;
      var span = document.createElement('span');
      span.innerText = num;
      var spanList = queue.childNodes;
      queue.insertBefore(span,spanList[0]);
    }

    //leftOut
    function leftOut(queue) {
      var spanList = queue.childNodes;
      alert(spanList[0].innerText);
      queue.removeChild(spanList[0]);  
    }

    //rightIn
    function rightIn(queue) {
      var num = document.getElementById('aqi-input').value;
      var span = document.createElement('span');
      span.innerText = num;
      queue.appendChild(span);
    }

    //rightOut
    function rightOut(queue){
      var spanList = queue.childNodes;
      alert(spanList[spanList.length-1].innerText);
      queue.removeChild(spanList[spanList.length-1]);
    }

    var queue = document.getElementById('queue');

    document.getElementById('leftIn').addEventListener('click',function () {
      leftIn(queue);
    })
    
    document.getElementById('leftOut').addEventListener('click',function () {
      leftOut(queue);
    })

    document.getElementById('rightIn').addEventListener('click',function () {
      rightIn(queue);
    })

    document.getElementById('rightOut').addEventListener('click',function () {
      rightOut(queue);
    })


    document.getElementById('queue').addEventListener('click',function (e) {
      e = e||window.event;
      var t =  e.target||e.srcElement;
      var tagName = t.tagName;
      if(tagName=='SPAN'){
        queue.removeChild(t);
      }
    })

})();

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

作bbTask4的時候本身剛開始是沒有什麼思路的，以前考慮的還有利用數組的「隊列方法」，而後發現仍是不是很實際吧，這份代碼的原創性也是比較低，在網上看到別人是如何實現的而後本身跟着作，總結一句就是本身對DOM的一些屬性和方法不是很熟，多是由於本身沒怎麼用到，而後還有值得比較學習的點就是點擊清除某一個節點的時候用到了事件委託，以爲挺好的，由於在不知道多少個節點的狀況下這種方法仍是比較高效的。（childNode，insertBefore，appendChild，createElement）學習

<--未完待續-->spa

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程