IFE JS2

In this example below you will see how to do a IFE JS2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1206189299, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1206189299 ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>IFE JS2</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 list = document.getElementById("aqi-list");
  var frag=document.createDocumentFragment();
  for(var i=0;i<aqiData.length;i++){
      if(aqiData[i][1] > 60) 
      {
        var newNode = document.createElement("li");
        newNode.appendChild(document.createTextNode(aqiData[i]));
        frag.appendChild(newNode);
      }
  }
  debugger;
  list.appendChild(frag);

})();

</script>
  
  

</body>

</html>

Comments