1. 编程号首页

B厂前端技术学院

编程小号 • • 未分类

B厂前端技术学院题库bbTask1<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>IFEJavaScriptTask01</title></head><body>&lt…

题库

bbTask1

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

bbTask2

<!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标签下。(排名没做)

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）

<–未完待续–>

转载于:https://www.cnblogs.com/xjlblog/p/9011596.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/34729.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注