JavaScript小Demo

要求：

用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边

<!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中
  */
  var val = document.getElementById("aqi-input");
  var butt = document.getElementById("button");
  var show = document.getElementById("aqi-display");
  butt.onclick = function(){
    show.innerHTML = val.value;
  }
})();
</script>
</body>
</html>

预览：

 

要求：

参考以下示例代码，页面加载后，将提供的空气质量数据数组，按照某种逻辑（比如空气质量大于60）进行过滤筛选，最后将符合条件的数据按照一定的格式要求显示在网页上

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 02</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的列表中
  */
 var aqiList = document.getElementById('aqi-list');
 var str='';
 var list = [];
 var num = ['一','二','三','四'];
 for (var i = 0; i < aqiData.length; i++) {
   if (aqiData[i][1]>60) {
     list.push(aqiData[i]);
   }
 }
 function des(a,b) {
   return b[1]-a[1];
 }
list.sort(des);
 for (var j = 0; j < list.length; j++) {
   str += '<li>第'+num[j]+'名：'+list[j][0]+','+list[j][1]+'</li>';
 }
 aqiList.innerHTML = str;
})();
</script>
</body>
</html>

 预览：

 

要求：

  • 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
  • 将数据按照某种顺序排序后，在resort列表中按照顺序显示出来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE JavaScript Task 03</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 city = document.getElementById('source').children;
        var data = [];
        //提取城市名和空气质量的关键字
        for(var i = 0; i < city.length; i++) {
            var text = city[i].innerText;
            var node = [text.substr(0, 2), text.substr(-2, 2)];
            data.push(node);
        }
        return data;
        /*
         data = [
         ["北京", 90],
         ["北京", 90]
         ……
         ]
         */
    }
    /**
     * sortAqiData
     * 按空气质量对data进行从小到大的排序
     * 返回一个排序后的数组
     */
    function sortAqiData(data) {
        data.sort(function(a, b) {
            return a[1] - b[1];
        });
        return data;
    }
    /**
     * render
     * 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
     * 格式见ul中的注释的部分
     */
    function render(data) {
        var arr = ["一","二","三","四","五","六","七"];
        var resort = document.getElementById('resort');
        for(var i = 0; i < data.length; i++) {
            var liText = '第' + arr[i] + '名：' + data[i][0] +"，" + '空气质量：';
            var oLi = document.createElement('li');
            var oB = document.createElement('b');
            oLi.innerText = liText;
            oB.innerText = data[i][1];
            oLi.appendChild(oB);
            resort.appendChild(oLi);
        }
    }
    function btnHandle() {
        var aqiData = getData();
        aqiData = sortAqiData(aqiData);
        render(aqiData);
    }
    function init() {
        // 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
        var btn = document.getElementById('sort-btn');
        btn.onclick = function() {
            btnHandle();
        };
    }
    init();
</script>
</body>
</html>

预览：

思路：

按要求，主要思路为：提取——排序——打印

提取：

获取source列表，注意，这里要获取的是source列表中的li标签，而不是ul标签。

所以不能直接用 getElementById() 方法，可以通过 nodeObject.children 语法来帮助获取元素的子节点。

 var city = document.getElementById('source').children; 

还可以使用HTML5新增的选择器 querySelectorAll，根据选择器规则返回所有符合要求的元素。

优点：使用方便（可以使用css选择符来查找节点）、兼容性好

缺点：是速率远远没有前者高。

 var city = document.querySelectorAll('#source>li'); 

#创建新数组，用于存放提取的数据。

#创建for循环，用于对全部的li标签进行提取。

#获取li标签中的文本，获取节点及其后代节点文本的语法有：

textContent（可以获取所有元素的内容，包括<script>和<style>） 

innerText（可以感知样式，不会返隐隐藏元素的文本内容），因为要忽视li标签中的css样式，所以这里选择 innerText 方法。

#提取关键字，并放入数组中。

这里使用 substr(start,length) 方法。

第一个参数是要抽取的子串的起始下标，负数则从末尾算起。

第二个参数为抽取的子串的长度。

然后再用 push() 方法，依次放入数组。

 var node = [text.substr(0, 2), text.substr(-2, 2)]; 

排序：

使用sort()方法进行排序。

 data.sort(function(a,b){ return a[1] - b[1];}); 

打印：

#首先获取resort列表。

#创建for循环。

#创建新的li标签。

使用createElement()方法创建分别创建li标签和b标签。

 var oLi = document.createElement('li'); 

 var oB = document.createElement('b'); 

按照任务描述，创建一个字符串变量。

 var arr = ["一","二","三","四","五","六","七"]; 

 var liText = '第' + arr[i] + '名：' + data[i][0] +"，" + '空气质量：'; 

用appendChild()方法，将字符串变量，赋值给li标签。

oLi.innerText = liText; 
oB.innerText = data[i][1]; 
oLi.appendChild(oB); 
resort.appendChild(oLi);

参考资料：

 

posted @ 2017-04-28 13:17  Lucky锦  阅读(996)  评论(0)    收藏  举报