第一课：简陋的登录框

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>js课程第一课</title>
  6.      <style>
  7.          body{padding: 20px;font:16px "微软雅黑";}
  8.          h3{text-align: center;margin-top: 0;}
  9.          label{width: 65px;display: inline-block;text-align: right;}
  10.          input{padding: 5px; border: 1px solid gray}
  11.          input:focus{outline: none;border: 1px solid #4488ff;}
  12.          span{font-size: 14px;}
  13.          .box{position: absolute;top: 0;right:0;bottom:0;left:0;margin: auto;width: 260px;height: 180px;padding: 20px;box-shadow: 0px 2px 3px 3px #f1f1f1;border-radius: 5px;transform: scale(1);transition: transform .35s ease-in-out;}
  14.          .row{margin-top: 10px;}
  15.          .error{color: red;font-size: 12px;padding: 5px 0;margin: 0;padding-left: 70px;}
  16.          .btn{padding: 5px 10px;background: #fff; border-radius: 5px;}
  17.          .btn:hover{color: #fff;background: #4488ff;border-color: #4488ff;cursor: pointer;}
  18.          .close{position: absolute;top: 10px;right: 10px;line-height: 14px;color: #DEDEDE;font-size: 24px;height: 14px;overflow: hidden;transform: rotate(0deg);transition: transform .35s;}
  19.          .close:hover{color: #333;cursor: pointer;transform: rotate(180deg);transition: transform .35s;}
  20.          /*.box-child{display: none;}*/
  21.          .box-child{display: block;background: #fff;line-height: 180px;text-align: center;transform: scale(0);}
  22.          .box-an{display: block;transform: scale(1);}
  23.          .box-child p{line-height: 30px;margin-top: 45px;}
  24.          .gray{color: gray;}
  25.          .black{color: black;}
  26.      </style>
  27.  </head>
  28.  <body>
  29.      <div class="box">
  30.          <h3>这是一个相当low的登录框</h3>
  31.          <form action="">
  32.              <div class="row">
  33.                  <label for="name">用户名：</label>
  34.                  <input type="text" id="name" placeholder="请输入您的用户名" value="">
  35.                  <p class="error" id="tip"></p>
  36.              </div>
  37.              <div class="row">
  38.              <label for="pass">密码：</label>
  39.                  <input type="password" id="pass" placeholder="" value="">
  40.              </div>
  41.              <div class="row">
  42.                  <input type="button" value="登录" id="submit" class="btn" style="margin: 0 20px 0 75px;">
  43.                  <input type="reset" value="取消" class="btn">
  44.              </div>
  45.          </form>
  46.          <div class="box box-child">
  47.              <p><span id="sCont"></span><br>欢迎您登录小石头官网！</p>
  48.              <span id="close" class="close">X</span>
  49.          </div>
  50.      </div>
  51.      <script>
  52.          var oBtn = document.getElementById("submit"),
  53.                  oTip = document.getElementById("tip"),
  54.                  sCont = document.getElementById("sCont"),
  55.                  oClose = document.getElementById("close"),
  56.                  sName = document.getElementById("name");
  57.          oBtn.onclick = function(){
  58.              if(!sName.value){
  59.                  oTip.innerText = "请输入您的的用户名！";
  60.                  // 修改元素文本innerText
  61.              }else{
  62.                  // sCont.parentNode.parentNode.className = "box box-child box-an";
  63.                  // 选取父元素parentNode、选择其他元素(下图)
  64.                  // sCont.parentNode.parentNode.style.display = 'block';
  65.                  sCont.parentNode.parentNode.style.transform = 'scale(1)';
  66.                  sCont.innerText = 'HELLO！ '+ sName.value + '！';
  67.                  // +号用于字符连接
  68.              }
  69.          }
  70.          oClose.onclick=function(){
  71.              // sCont.parentNode.parentNode.className = "box box-child";//通过增删类名（核心是修改display或者其他用于可见/隐藏的方案，比如scale的0/1，比如opacity的0/1等）
  72.              // document.querySelector(".box-child")['style'].display = 'none';//通过display的方式修改值
  73.              // 注意querySelector的选择方法
  74.              // 注意['style']这种方括号选取属性的方法
  75.              sCont.parentNode.parentNode.style.transform = 'scale(0)';
  76.              // 想要实现动画效果就要更改动画值，之前我是transform和display一起更改，动画效果就看不出来，后来只更改缩放，就有了效果。
  77.          }
  78.      </script>
  79.  </body>
  80.  </html>

代码

  1. 1.js查找父元素：parentNode
  2. 其他补缺：
  3. 全部节点：childNodes
  4. 弟弟妹妹节点：nextSbiling
  5. 哥哥姐姐节点：previousSbiling
  6. 第一个儿子：firstChild
  7. 最后一个儿子：lastChild
  8. 2.document.querySelector(".btn-child"),注意选择器的那个点，或者是id的时候注意#号
  9. 3.当input的表单类型为submit和reset，且被form元素包裹的时候，点击submit和reset的类似按钮，会在执行完毕逻辑（比如提交表单）后，重置/重新刷新页面。当你想要提交后不刷新的功能时，我的解决方法是把submit改成了button按钮。

不足：

第二课：城市空气指数排名

html

  1.  <div class="box">
  2.          <h3>城市空气质量表</h3>
  3.          <form class="weater-box">
  4.              <label for="city">城市：</label>
  5.              <input type="text" id="city" placeholder="请输入你们家的" value=""><br>
  6.              <p class="error" id="cityError"></p>
  7.              <label for="weater">空气指数：</label>
  8.              <input type="text" id="weater" placeholder="请输入你们家的" value="">
  9.              <input type="button" value="提交" id="submit">
  10.              <p class="error" id="weaterError"></p>
  11.          </form>
  12.          <ul class="rank-box">
  13.              <li id="noData">暂无数据...</li>
  14.          </ul>
  15.          <div class="clearfix">
  16.              <input type="button" value="排序" class="rank" id="rank">
  17.              <input type="button" value="清空" class="rank" id="rankClear">
  18.          </div>
  19.          <p class="info" id="info"></p>
  20.      </div>

html结构

css

  1.  body{font:16px "微软雅黑";}
  2.  h3{text-align: center;margin-top:;}
  3.  .clearfix{*zoom:;}
  4.  .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  5.  .box{width: 320px;margin: 210px auto;overflow: hidden;box-shadow: 0px 2px 2px 3px #dedede;padding: 20px;}
  6.  .box,input,input[type="button"],.rank-box,.progress{border: 1px solid #dedede; border-radius: 5px;}
  7.  label{width: 80px;display: inline-block;text-align: right;}
  8.  input{padding: 5px;}
  9.  input:focus{outline: none;border: 1px solid #4488ff;}
  10.  input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  11.  input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  12.  input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  13.  .error{color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  14.  .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  15.  .rank-box{list-style: none;background: #fff;margin: 20px auto 0;overflow: hidden;padding: 20px;}
  16.  .rank-box li{margin-bottom: 10px;}
  17.  .progress{position: relative;margin-left: 10px;width: 100px;height: 10px;display: inline-block;overflow: hidden;vertical-align: text-top;}
  18.  .pro-flo{position:absolute; top:; left:; background: #4488ff;height: 10px; width: 50px;}
  19.  .city{width: 85px;display: inline-block;text-align: right;overflow: hidden;}
  20.  .rank{margin-top: 10px;float: right;margin-left: 5px}
  21.  #noData{font-size: 14px;text-align: center;color: #dedede;}
  22.  .num{font-size: 12px;    vertical-align: super;color: gray;margin-left: 5px}

css

js

  1.  var oBtnR = document.getElementById('rank'),
  2.                  oBtnS = document.getElementById('submit'),
  3.                  oBtnC = document.getElementById('rankClear'),
  4.                  oBtnR = document.getElementById('rank'),
  5.                  oNoData = document.getElementById('noData'),
  6.                  sCityError = document.getElementById('cityError'),
  7.                  sWeaterError = document.getElementById('weaterError'),
  8.                  sInfo = document.getElementById('info'),
  9.                  sCity = document.getElementById('city'),
  10.                  sWeater = document.getElementById('weater');
  11.          var oUl = document.querySelector(".rank-box"),
  12.                  oNum = document.querySelector(".num");
  13.          // 事先添加默认列表
  14.          /*遍历读取aqiData中各个城市的数据
  15.            将空气质量指数大于60的城市显示到aqi-list的列表中
  16.          */
  17.          var aqiData = [
  18.            ["北京", 90],
  19.            ["上海", 50],
  20.            ["呼和浩特", 10],
  21.            ["广州", 50],
  22.            ["成都", 90],
  23.            ["西安", 100]
  24.          ];
  25.          if(!aqiData){
  26.              oNoData.style.display = 'block';
  27.          }else{
  28.              oNoData.style.display = 'none';
  29.              for (var i = 0; i < aqiData.length; i++) {
  30.                  var oLiHtml = '<span class="city">'+aqiData[i][0]+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+aqiData[i][1]+'px"></span></span><span class="num">'+aqiData[i][1]+'%</span>';
  31.                  add(oLiHtml);
  32.              }
  33.          }
  34.          // 自主添加
  35.          oBtnS.disabled = true;
  36.          sCity.onfocus = function(){sCityError.innerText = "";};
  37.          sWeater.onfocus = function(){sWeaterError.innerText = "";};
  38.          sCity.onblur = function(){
  39.              if(!sCity.value){
  40.                  sCityError.innerText = "请输入内容！";
  41.              }else if(parseInt(sCity.value)|| parseInt(sCity.value)== 0 ){
  42.                  sCityError.innerText = "请输入正规有效的中文地名！";
  43.              }else{
  44.                  oBtnS.disabled = false;
  45.              }
  46.          }
  47.          sWeater.onblur = function(){weaterIf();}
  48.          oBtnS.onclick = function(){
  49.              var oLiText = '<span class="city">'+sCity.value+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+sWeater.value+'px"></span></span><span class="num">'+sWeater.value+'%</span>';
  50.              weaterIf();
  51.              add(oLiText);
  52.          }
  53.          function add(strings){
  54.              var oLi = document.createElement("li");
  55.              oLi.innerHTML = strings;
  56.              oUl.appendChild(oLi);
  57.              sCity.value = '';
  58.              sWeater.value = '';
  59.          }
  60.          function weaterIf(){
  61.              if(!sWeater.value){
  62.                  sWeaterError.innerText = "请输入内容！";
  63.              }else if(isNaN(sWeater.value) || sWeater.value==" "){
  64.                  sWeaterError.innerText = "请输入正确的数字！";
  65.              }else if(parseInt(sWeater.value)<0||parseInt(sWeater.value)>100){
  66.                  sWeaterError.innerText = "请输入0-100之内的数字！";
  67.              }else{
  68.                  sWeater.value = Number(sWeater.value);
  69.                  oBtnS.disabled = false;
  70.                  if(oNoData){
  71.                      oNoData.style.display = 'none';
  72.                  }
  73.              }
  74.          }
  75.          // 排序
  76.          function sortFun(a,b){
  77.              return a[1] - b[1];
  78.          }
  79.          oBtnR.onclick = function(){
  80.              if(oUl.children.length <= 1){
  81.                  sInfo.innerText = "没有序好排的！";
  82.              }else{
  83.                  // 问题是，怎么用现在排好序的数组，对li进行排序？
  84.                  // 把关键信息（获取到每一个li中的值）提取出来整理成新的数组（用push把值放到数组中，利用sort进行排序成新数组），再循环抽取调用
  85.                  // 新问题：信息抽取的时候，会取到名字的冒号，那么需要字符串处理掉冒号：字符串截取函数slice(start,end)
  86.                  // 新问题：将抽取的信息汇总成二维数组？
  87.                  var arr = [];
  88.                  var oJson = {};
  89.                  for(var i = 1; i < oUl.children.length; i++){
  90.                      var cityName = oUl.children[i].children[0].innerText;
  91.                      var sCityData = cityName.slice(0,cityName.length-1);
  92.                      var nWeaterData = parseInt(oUl.children[i].children[2].innerText);
  93.                      // 收集数据之方法一：存成二维数组
  94.                      arr[i] = new Array();//二维数组初始化之，遍历的过程中，定义数组
  95.                      for(var a = 1; a < 2; a++){
  96.                          arr[i].push(sCityData);//将arr[i]变成数组后，才支持push方法，所以push等数组方法需要数组来调用
  97.                          arr[i].push(nWeaterData);
  98.                      }
  99.                      // 收集数据之方法二：存成对象
  100.                      // oJson[i] = {};
  101.                      // oJson[i].name = sCityData
  102.                      // oJson[i].num = nWeaterData;
  103.                  }
  104.              // console.log(oJson)
  105.              //             for(var a = 0; a < 10; a++){
  106.  // // // // // // arr长度有问题,暂未找
  107.              //             console.log(arr[a])
  108.              //             }
  109.              // 接下来就是怎么给二维数组或json进行排序了，
  110.              // console.log(arr.sort(sortFun))
  111.              // 排序后翻转,或者把排序函数的a-b改成b-a，就成了从大到小的排序了
  112.              var rankData = arr.sort(sortFun);
  113.              var arrays = rankData.reverse()
  114.              console.log(arrays)
  115.              // 排完后打扫屋子
  116.              removeLi();
  117.              // 最后 把新的按顺序排列的东西再装进dom中即可。
  118.                  for (var i = 1; i < arrays.length; i++) {
  119.                      var oNewLi = '<span class="city">'+arrays[i][0]+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+arrays[i][1]+'px"></span></span><span class="num">'+arrays[i][1]+'%</span>';
  120.                      add(oNewLi);
  121.                  }
  122.  
  123.              }
  124.          }
  125.          // 清空
  126.          oBtnC.onclick = function(){
  127.              if(oUl.children.length > 1){
  128.                  removeLi();
  129.                  oNoData.style.display = 'block';
  130.                  setTimeout(function(){clear()},100)
  131.              }else{
  132.                  sInfo.innerText = "没有可以清空的数据！";
  133.              }
  134.          }
  135.          function removeLi(){
  136.              var childs = oUl.childNodes;
  137.              for(var i = childs.length - 1;i > 1; i--){
  138.              // 这里我让i>1,是不想删除最后一个我自己的提示文字。
  139.                  oUl.removeChild(childs[i])
  140.              // 当程序运行后，无论在FireFox还是在IE下，均不能完全的删除所有的子节点（FireFox中把空白区域也当成节点，所以删除结点的结果会不一样的），这是因为当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点这样程序运行的结果就是只删除了一半的子节点，用for in遍历结果也是一样的。想正常的删除全部节点的话，我们应该从后面往前删除，
  141.              }
  142.          }
  143.          function clear(){sInfo.innerText = "已清空！";}
  144.      </script>

js

  1.  <script>
  2.          var oBtnR = document.getElementById('rank'),
  3.                  oBtnS = document.getElementById('submit'),
  4.                  oBtnC = document.getElementById('rankClear'),
  5.                  oBtnR = document.getElementById('rank'),
  6.                  oNoData = document.getElementById('noData'),
  7.                  sCityError = document.getElementById('cityError'),
  8.                  sWeaterError = document.getElementById('weaterError'),
  9.                  sInfo = document.getElementById('info'),
  10.                  sCity = document.getElementById('city'),
  11.                  sWeater = document.getElementById('weater');
  12.          var oUl = document.querySelector(".rank-box"),
  13.                  oNum = document.querySelector(".num");
  14.          // 事先添加默认列表
  15.          /*遍历读取aqiData中各个城市的数据
  16.            将空气质量指数大于60的城市显示到aqi-list的列表中
  17.          */
  18.          var aqiData = [
  19.            ["北京", 90],
  20.            ["上海", 50],
  21.            ["呼和浩特", 10],
  22.            ["广州", 50],
  23.            ["成都", 90],
  24.            ["西安", 100]
  25.          ];
  26.          if(!aqiData){
  27.              oNoData.style.display = 'block';
  28.          }else{
  29.              oNoData.style.display = 'none';
  30.              for (var i = 0; i < aqiData.length; i++) {
  31.                  var oLiHtml = '<span class="city">'+aqiData[i][0]+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+aqiData[i][1]+'px"></span></span><span class="num">'+aqiData[i][1]+'%</span>';
  32.                  add(oLiHtml);
  33.              }
  34.          }
  35.          // 自主添加
  36.          oBtnS.disabled = true;
  37.          sCity.onfocus = function(){sCityError.innerText = "";};
  38.          sWeater.onfocus = function(){sWeaterError.innerText = "";oBtnS.disabled = false;};
  39.          sCity.onblur = function(){
  40.              cityIf();
  41.          }
  42.          sWeater.onblur = function(){
  43.              weaterIf();
  44.          }
  45.          oBtnS.onclick = function(){
  46.              if(!sCity.value){
  47.                  sCityError.innerText = "请输入内容！";
  48.              }else if(parseInt(sCity.value)|| parseInt(sCity.value)== 0 ){
  49.                  sCityError.innerText = "请输入正规有效的中文地名！";
  50.              }else{
  51.                  if(!sWeater.value){
  52.                      sWeaterError.innerText = "请输入内容！";
  53.                  }else if(isNaN(sWeater.value) || sWeater.value==" "){
  54.                      sWeaterError.innerText = "请输入正确的数字！";
  55.                  }else if(parseInt(sWeater.value)<0||parseInt(sWeater.value)>100){
  56.                      sWeaterError.innerText = "请输入0-100之内的数字！";
  57.                  }else{
  58.                      sWeater.value = Number(sWeater.value);
  59.                      if(oNoData){
  60.                          oNoData.style.display = 'none';
  61.                      }
  62.                      var oLiText = '<span class="city">'+sCity.value+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+sWeater.value+'px"></span></span><span class="num">'+sWeater.value+'%</span>';
  63.                      add(oLiText);
  64.                      sCity.value = '';
  65.                      sWeater.value = '';
  66.                      oBtnS.disabled = true;//每次提交完了，再禁用一下按钮，不然还能不停的传空数据进去
  67.                  }
  68.              }
  69.          }
  70.          function add(strings){
  71.              var oLi = document.createElement("li");
  72.              oLi.innerHTML = strings;
  73.              oUl.appendChild(oLi);
  74.  
  75.          }
  76.          function cityIf(){
  77.              if(!sCity.value){
  78.                  sCityError.innerText = "请输入内容！";
  79.              }else if(parseInt(sCity.value)|| parseInt(sCity.value)== 0 ){
  80.                  sCityError.innerText = "请输入正规有效的中文地名！";
  81.              }else{
  82.              }
  83.          }
  84.          function weaterIf(){
  85.              // 一个bug：城市输入了，但是数值不输入只是点击一下文本框，再去点击提交按钮，是可以提交的。
  86.              if(!sWeater.value){
  87.                  sWeaterError.innerText = "请输入内容！";
  88.              }else if(isNaN(sWeater.value) || sWeater.value==" "){
  89.                  sWeaterError.innerText = "请输入正确的数字！";
  90.              }else if(parseInt(sWeater.value)<0||parseInt(sWeater.value)>100){
  91.                  sWeaterError.innerText = "请输入0-100之内的数字！";
  92.              }else{
  93.                  sWeater.value = Number(sWeater.value);
  94.                  if(oNoData){
  95.                      oNoData.style.display = 'none';
  96.                  }
  97.              }
  98.          }
  99.          // 排序
  100.          function sortFun(a,b){
  101.              return a[1] - b[1];
  102.          }
  103.          oBtnR.onclick = function(){
  104.              if(oUl.children.length <= 1){
  105.                  sInfo.innerText = "没有序好排的！";
  106.              }else{
  107.                  // 问题是，怎么用现在排好序的数组，对li进行排序？
  108.                  // 把关键信息（获取到每一个li中的值）提取出来整理成新的数组（用push把值放到数组中，利用sort进行排序成新数组），再循环抽取调用
  109.                  // 新问题：信息抽取的时候，会取到名字的冒号，那么需要字符串处理掉冒号：字符串截取函数slice(start,end)
  110.                  // 新问题：将抽取的信息汇总成二维数组？
  111.                  var arr = [];
  112.                  var oJson = {};
  113.                  for(var i = 1; i < oUl.children.length; i++){
  114.                      var cityName = oUl.children[i].children[0].innerText;
  115.                      var sCityData = cityName.slice(0,cityName.length-1);
  116.                      var nWeaterData = parseInt(oUl.children[i].children[2].innerText);
  117.                      // 收集数据之方法一：存成二维数组
  118.                      arr[i] = new Array();//二维数组初始化之，遍历的过程中，定义数组
  119.                      for(var a = 1; a < 2; a++){
  120.                          arr[i].push(sCityData);//将arr[i]变成数组后，才支持push方法，所以push等数组方法需要数组来调用
  121.                          arr[i].push(nWeaterData);
  122.                      }
  123.                      // 收集数据之方法二：存成对象
  124.                      // oJson[i] = {};
  125.                      // oJson[i].name = sCityData
  126.                      // oJson[i].num = nWeaterData;
  127.                  }
  128.              // console.log(oJson)
  129.              //             for(var a = 0; a < 10; a++){
  130.  // // // // // // arr长度有问题,暂未找
  131.              //             console.log(arr[a])
  132.              //             }
  133.              // 接下来就是怎么给二维数组或json进行排序了，
  134.              // console.log(arr.sort(sortFun))
  135.              // 排序后翻转,或者把排序函数的a-b改成b-a，就成了从大到小的排序了
  136.              var rankData = arr.sort(sortFun);
  137.              var arrays = rankData.reverse()
  138.              console.log(arrays)
  139.              // 排完后打扫屋子
  140.              removeLi();
  141.              // 最后 把新的按顺序排列的东西再装进dom中即可。
  142.                  for (var i = 1; i < arrays.length; i++) {
  143.                      var oNewLi = '<span class="city">'+arrays[i][0]+'：'+'</span><span class="progress"><span class="pro-flo" style="width: '+arrays[i][1]+'px"></span></span><span class="num">'+arrays[i][1]+'%</span>';
  144.                      add(oNewLi);
  145.                  }
  146.  
  147.              }
  148.          }
  149.          // 其他方法
  150.                  // //1.双重for循环。(外循环控制轮数)
  151.      //     for(var i=0;i<arr.length-1;i++){
  152.      //         //2.指定轮数和次数（内循环控制次数）
  153.      //         for(var j=0;j<arr.length-1;j++){
  154.      //             //3.判断是否符合标准。如果符合标准交换位置。
  155.      //             //从小到大排列顺滑，如果前面的比后面的大，那么交换位置。
  156.      //             if(arr[j] > arr[j+1]){
  157.      //                 var temp = arr[j];
  158.      //                 arr[j] = arr[j+1];
  159.      //                 arr[j+1] = temp;
  160.      //             }
  161.      //         }
  162.      //     }
  163.      //     console.log(arr);
  164.          // 清空
  165.          oBtnC.onclick = function(){
  166.              if(oUl.children.length > 1){
  167.                  removeLi();
  168.                  oNoData.style.display = 'block';
  169.                  setTimeout(function(){clear()},100)
  170.              }else{
  171.                  sInfo.innerText = "没有可以清空的数据！";
  172.              }
  173.          }
  174.          function removeLi(){
  175.              var childs = oUl.childNodes;
  176.              for(var i = childs.length - 1;i > 1; i--){
  177.              // 这里我让i>1,是不想删除最后一个我自己的提示文字。
  178.                  oUl.removeChild(childs[i])
  179.              // 当程序运行后，无论在FireFox还是在IE下，均不能完全的删除所有的子节点（FireFox中把空白区域也当成节点，所以删除结点的结果会不一样的），这是因为当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点这样程序运行的结果就是只删除了一半的子节点，用for in遍历结果也是一样的。想正常的删除全部节点的话，我们应该从后面往前删除，
  180.              }
  181.          }
  182.          function clear(){sInfo.innerText = "已清空！";}
  183.      </script>

js2-修改提交数据的逻辑bug

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>js第二期-城市环境排名</title>
  6.      <style>
  7.          body{font:16px "微软雅黑";}
  8.          h3{text-align: center;margin-top: 0;}
  9.          .clearfix{*zoom:1;}
  10.          .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height: 0;}
  11.          .box{margin: 110px auto;overflow: hidden;box-shadow: 0px 2px 2px 3px #dedede;padding: 20px;}
  12.          form{width: 320px;margin: 0 auto;}
  13.          .box,input,input[type="button"],.rank-box,.progress{border: 1px solid #dedede; border-radius: 5px;}
  14.          label{width: 80px;display: inline-block;text-align: right;}
  15.          input{padding: 5px;}
  16.          input:focus{outline: none;border: 1px solid #4488ff;}
  17.          input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  18.          input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  19.          input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  20.          .error{color: red;font-size: 12px;padding: 5px 0;margin: 0;padding-left: 85px;}
  21.          .info{color: #4488ff;font-size: 12px;text-align: right;margin: 0;padding-top: 5px;}
  22.  
  23.          ul.rank-box{list-style: none;background: #fff;margin: 20px auto 0;overflow: hidden;padding: 20px;text-align: center;}
  24.          .rank-box li,.city,.num{width: 85px;text-align: center;}
  25.          .rank-box li{position: relative;margin-bottom: 10px;display: inline-block;margin-right: 10px;}
  26.          .progress{position: relative;margin: 25px 0;width: 20px;height: 100px;display: inline-block;overflow: hidden;vertical-align: text-top;}
  27.          .pro-flo{bottom: 0; background: #4488ff;width: 20px;height: 30px;}
  28.          .pro-flo,.city,.num{position: absolute;left: 0;}
  29.          .city{top: 130px;display: inline-block;overflow: hidden;max-height: 19px;}
  30.          .rank{margin-top: 10px;float: right;margin-left: 5px}
  31.          #noData{font-size: 14px; margin: 0 auto;color: #dedede;}
  32.          .num{top: 5px;font-size: 12px;color: gray;}
  33.      </style>
  34.  </head>
  35.  <body>
  36.      <div class="box">
  37.          <h3>城市空气质量表</h3>
  38.          <form class="weater-box">
  39.              <label for="city">城市：</label>
  40.              <input type="text" id="city" placeholder="请输入你们家的" value=""><br>
  41.              <p class="error" id="cityError"></p>
  42.              <label for="weater">空气指数：</label>
  43.              <input type="text" id="weater" placeholder="请输入你们家的" value="">
  44.              <input type="button" value="提交" id="submit">
  45.              <p class="error" id="weaterError"></p>
  46.          </form>
  47.          <ul class="rank-box">
  48.              <li id="noData">暂无数据...</li>
  49.          </ul>
  50.          <div class="clearfix">
  51.              <input type="button" value="排序" class="rank" id="rank">
  52.              <input type="button" value="清空" class="rank" id="rankClear">
  53.          </div>
  54.          <p class="info" id="info"></p>
  55.      </div>
  56.      <script>
  57.          var oBtnR = document.getElementById('rank'),
  58.                  oBtnS = document.getElementById('submit'),
  59.                  oBtnC = document.getElementById('rankClear'),
  60.                  oBtnR = document.getElementById('rank'),
  61.                  oNoData = document.getElementById('noData'),
  62.                  sCityError = document.getElementById('cityError'),
  63.                  sWeaterError = document.getElementById('weaterError'),
  64.                  sInfo = document.getElementById('info'),
  65.                  sCity = document.getElementById('city'),
  66.                  sWeater = document.getElementById('weater');
  67.          var oUl = document.querySelector(".rank-box"),
  68.                  oNum = document.querySelector(".num");
  69.          var aqiData = [
  70.            ["北京", 90],
  71.            ["上海", 50],
  72.            ["呼和浩特", 10],
  73.            ["广州", 50],
  74.            ["成都", 90],
  75.            ["西安", 100]
  76.          ];
  77.          if(!aqiData){
  78.              oNoData.style.display = 'block';
  79.          }else{
  80.              oNoData.style.display = 'none';
  81.              for (var i = 0; i < aqiData.length; i++) {
  82.                  var oLiHtml = '<span class="city">'+aqiData[i][0]+'</span><span class="progress"><span class="pro-flo" style="height: '+aqiData[i][1]+'px"></span></span><span class="num">'+aqiData[i][1]+'%</span>';
  83.                  add(oLiHtml);
  84.              }
  85.          }
  86.          // 自主添加
  87.          oBtnS.disabled = true;
  88.          sCity.onfocus = function(){sCityError.innerText = "";};
  89.          sWeater.onfocus = function(){sWeaterError.innerText = "";oBtnS.disabled = false;};
  90.          sCity.onblur = function(){
  91.              cityIf()
  92.          }
  93.          sWeater.onblur = function(){
  94.              weaterIf();
  95.          }
  96.          oBtnS.onclick = function(){
  97.              if(!sCity.value){
  98.                  sCityError.innerText = "请输入内容！";
  99.              }else if(parseInt(sCity.value)|| parseInt(sCity.value)== 0 ){
  100.                  sCityError.innerText = "请输入正规有效的中文地名！";
  101.              }else{
  102.                  if(!sWeater.value){
  103.                      sWeaterError.innerText = "请输入内容！";
  104.                  }else if(isNaN(sWeater.value) || sWeater.value==" "){
  105.                      sWeaterError.innerText = "请输入正确的数字！";
  106.                  }else if(parseInt(sWeater.value)<0||parseInt(sWeater.value)>100){
  107.                      sWeaterError.innerText = "请输入0-100之内的数字！";
  108.                  }else{
  109.                      sWeater.value = Number(sWeater.value);
  110.                      if(oNoData){
  111.                          oNoData.style.display = 'none';
  112.                      }
  113.                      var oLiText = '<span class="city">'+sCity.value+'</span><span class="progress"><span class="pro-flo" style="height: '+sWeater.value+'px"></span></span><span class="num">'+sWeater.value+'%</span>';
  114.                      add(oLiText);
  115.                  }
  116.              }
  117.          }
  118.          function add(strings){
  119.              var oLi = document.createElement("li");
  120.              oLi.innerHTML = strings;
  121.              oUl.appendChild(oLi);
  122.              sCity.value = '';
  123.              sWeater.value = '';
  124.              oBtnS.disabled = true;//每次提交完了，再禁用一下按钮，不然还能不停的传空数据进去
  125.          }
  126.          function cityIf(){
  127.              if(!sCity.value){
  128.                  sCityError.innerText = "请输入内容！";
  129.              }else if(parseInt(sCity.value)|| parseInt(sCity.value)== 0 ){
  130.                  sCityError.innerText = "请输入正规有效的中文地名！";
  131.              }else{
  132.              }
  133.          }
  134.          function weaterIf(){
  135.              if(!sWeater.value){
  136.                  sWeaterError.innerText = "请输入内容！";
  137.              }else if(isNaN(sWeater.value) || sWeater.value==" "){
  138.                  sWeaterError.innerText = "请输入正确的数字！";
  139.              }else if(parseInt(sWeater.value)<0||parseInt(sWeater.value)>100){
  140.                  sWeaterError.innerText = "请输入0-100之内的数字！";
  141.              }else{
  142.                  sWeater.value = Number(sWeater.value);
  143.                  oBtnS.disabled = false;
  144.                  if(oNoData){
  145.                      oNoData.style.display = 'none';
  146.                  }
  147.              }
  148.          }
  149.          // 排序
  150.          function sortFun(a,b){
  151.              return a[1] - b[1];
  152.          }
  153.          oBtnR.onclick = function(){
  154.              if(oUl.children.length <= 1){
  155.                  sInfo.innerText = "没有序好排的！";
  156.              }else{
  157.                  var arr = [];
  158.                  for(var i = 1; i < oUl.children.length; i++){
  159.                      var sCityData = oUl.children[i].children[0].innerText;
  160.                      var nWeaterData = parseInt(oUl.children[i].children[2].innerText);
  161.                      arr[i] = new Array();
  162.                      for(var a = 1; a < 2; a++){
  163.                          arr[i].push(sCityData);
  164.                          arr[i].push(nWeaterData);
  165.                      }
  166.  
  167.                  }
  168.              var rankData = arr.sort(sortFun);
  169.              var arrays = rankData.reverse()
  170.              console.log(arrays)
  171.              removeLi();
  172.                  for (var i = 1; i < arrays.length; i++) {
  173.                      var oNewLi = '<span class="city">'+arrays[i][0]+'</span><span class="progress"><span class="pro-flo" style="height: '+arrays[i][1]+'px"></span></span><span class="num">'+arrays[i][1]+'%</span>';
  174.                      add(oNewLi);
  175.                  }
  176.  
  177.              }
  178.          }
  179.          // 清空
  180.          oBtnC.onclick = function(){
  181.              if(oUl.children.length > 1){
  182.                  removeLi();
  183.                  oNoData.style.display = 'block';
  184.                  setTimeout(function(){clear()},100)
  185.              }else{
  186.                  sInfo.innerText = "没有可以清空的数据！";
  187.              }
  188.          }
  189.          function removeLi(){
  190.              var childs = oUl.childNodes;
  191.              for(var i = childs.length - 1;i > 1; i--){
  192.                  oUl.removeChild(childs[i])
  193.              }
  194.          }
  195.          function clear(){sInfo.innerText = "已清空！";}
  196.      </script>
  197.  </body>
  198.  </html>

第二种玩法-竖形柱状图

最后解决一个bug，发现排序按钮可以无限的点击，每次点击都会执行一次删除并重新插入的逻辑，而且遇到相同数据的两个甚至多个，第二次或之后的排序会导致几个相同的数据替换位置，有点傻瓜。

所以每次点击完一次排序按钮后，给排序按钮加上禁用，只有再次输入新的数值后，再放开排序按钮。这样就不可以无限点击排序了。

 

解析与不足

  1.  1. switch语句可以替换掉逻辑结构多的if语句
  2.  2. appendChild()必须与createElmenet()相结合。注意createElement的写法一定要正确
  3.  3.监听input的键入键出事件onblur、onfocus
  4.  4.number，parseInt，parseFloat的区别。注意number函数的写法，首字母大写Number()
  5.  5.removeChild删除子节点、删除所有子节点，利用for循环+removeChild，倒着删：for(var i = childs.length - 1;i > 0; i--){}
  6.  6.一次性的定时器遏制住alert()的优先弹窗功能
  7.  7.push()向后插入一个数据到数组，reverse()翻转数组，把数组里边的数据翻个个儿。
  8.  8.sort()与比较大小的函数function sortFun(a,b){return a - b};如果a[1] - b[1]，则可以判断二维数组中每个数组的第2个值的大小，a-b从小到大，反之从大到小。
  9.  9.对已有结构排序：先将结构中的数据取出，生成数组排序，之后再插入到结构中。
  10.  10.字符串截取函数：slice()、substring()、substr()
  11.  11.字符串中最后一个字符的下标：字符.length-1
  12.  12.获取数据生成二维数组/json格式：利用双重循环
  13.  逆推遍历二维数组的方法，循环外创建数组/json，第一重循环中创建二维数组/二维json(大概就是那么个意思)，第二重循环中插入值到二维数组/二维json中。如下：
  14.      var arr = [];
  15.      for(var i = 1; i < oUl.children.length; i++){
  16.          存成二维数组
  17.          arr[i] = new Array();//二维数组初始化之，遍历的过程中，定义数组
  18.          for(var a = 1; a < 2; a++){//这里就循环一次，删掉也可以正常执行程序
  19.              arr[i].push(sCityData);//将arr[i]初始化成数组后，才支持push方法，所以push等数组方法需要数组来调用
  20.              arr[i].push(nWeaterData);
  21.          }
  22.      }

解析与不足

第三课：城市空气指数排名（不可增删）

html

  1.  <div class="box">
  2.          <h3>空气质量排序</h3>
  3.          <ul id="source">
  4.              <li>北京空气质量：
  5.              <b>90</b>
  6.              <span class="progress">
  7.                  <span class="pro-flo" style="width: 90px;"></span>
  8.              </span>
  9.              </li>
  10.              <li>呼和浩特空气质量：
  11.                  <b>70</b>
  12.              <span class="progress">
  13.                  <span class="pro-flo" style="width: 70px;"></span>
  14.              </span></li>
  15.              <li>内蒙古空气质量：
  16.                  <b>80</b>
  17.              <span class="progress">
  18.                  <span class="pro-flo" style="width: 80px;"></span>
  19.              </span></li>
  20.              <li>广州空气质量：
  21.                  <b>50</b>
  22.              <span class="progress">
  23.                  <span class="pro-flo" style="width: 50px;"></span>
  24.              </span></li>
  25.              <li>深圳空气质量：
  26.                  <b>4</b>
  27.              <span class="progress">
  28.                  <span class="pro-flo" style="width: 40px;"></span>
  29.              </span></li>
  30.              <li>福州空气质量：
  31.                  <b>32</b>
  32.              <span class="progress">
  33.                  <span class="pro-flo" style="width: 32px;"></span>
  34.              </span></li>
  35.              <li>成都空气质量：
  36.                  <b>100</b>
  37.              <span class="progress">
  38.                  <span class="pro-flo" style="width: 90px;"></span>
  39.              </span></li>
  40.          </ul>
  41.          <div class="rank-box">
  42.              <h3>排序后</h3>
  43.              <ul id="resort">
  44.                  <!-- <li>第一名：北京空气质量：
  45.                      <b>90</b>
  46.                      <span class="progress">
  47.                          <span class="pro-flo" style="width: 90px;"></span>
  48.                      </span>
  49.                  </li> -->
  50.              </ul>
  51.          </div>
  52.          <div class="btn">
  53.              <input type="button" name="" id="sort-btn" value="排序">
  54.              <p class="error"></p>
  55.          </div>
  56.      </div>

结构

css

  1. body{font:16px "微软雅黑";}
  2. h3{text-align: center;margin-top:;}
  3. ul,li{list-style: none;padding:;}
  4. ul{display: inline-block;text-align: left;}
  5. li{margin-bottom: 10px;}
  6. .clearfix{*zoom:;}
  7. .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  8. .box{width: auto;margin: 210px auto;padding: 20px;overflow: hidden;text-align: center;box-shadow: 2px 2px 3px 0px #dedede; border-radius: 5px;border: 1px solid #efefef}
  9. input,input[type="button"],.rank-box,.progress{border: 1px solid #dedede; border-radius: 5px;}
  10. label{width: 80px;display: inline-block;text-align: right;}
  11. input{padding: 5px;}
  12. input:focus{outline: none;border: 1px solid #4488ff;}
  13. input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  14. input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  15. input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  16. ul#source{padding-left: 20px;}
  17. .error{display: none;color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  18. .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  19. .btn{text-align: right;}
  20. .rank-box{margin-bottom: 10px;display: none;padding: 10px;}
  21. .progress{position: relative;margin-left: 10px;width: 100px;height: 10px;display: inline-block;overflow: hidden;}
  22. .pro-flo{position:absolute; top:; left:; background: #4488ff;height: 10px;}
  23. .city{width: 85px;display: inline-block;text-align: right;overflow: hidden;}
  24. .rank{margin-top: 10px;float: right;margin-left: 5px}
  25. #noData{font-size: 14px;text-align: center;color: #dedede;}
  26. .num{font-size: 12px;    vertical-align: super;color: gray;margin-left: 5px}

样式

js

  1.  var oBtn = document.getElementById("sort-btn"),
  2.                  oSourse = document.getElementById("source"),
  3.                  oResort = document.getElementById("resort"),
  4.                  oError = document.querySelector(".error"),
  5.                  oRankBox = document.querySelector(".rank-box");
  6.          var nIndex = 0;
  7.          oBtn.onclick = function(){
  8.              if(nIndex == 0){
  9.                  var arr = [];
  10.                  var sText = "";
  11.                  for(var i = 0; i< oSourse.children.length; i++){
  12.                      sText = oSourse.children[i].innerText;//这里注意是等于不是加等于，每次循环添加一次，而不是累加全部循环的值。只为获取
  13.                      arr[i] = new Array();//这个地方还不能用var 直接arr[i] = new Array()就好，而用=[]这样也会报错
  14.                      arr[i][0] = sText.slice(0,sText.indexOf("空"));//从0截取到“空”字 得到城市名字
  15.                      arr[i][1] = sText.slice(sText.indexOf("：")+2,sText.length-1)//从“：”字截取到长度-1位，得到天气数值
  16.                      //这个地方也是直接等于，一次添加即可，下次就添加到别的数组里了，所以不能累加。
  17.                  }
  18.                  // 排序
  19.                  function sortArr(a,b){
  20.                      return b[1] - a[1];//b-a为倒序
  21.                  }
  22.                  var aRankArr = arr.sort(sortArr);
  23.                  var aSerialNum = ["一","二", '三', '四', '五', '六', '七'];
  24.                  // 遗留问题，第一名，第二名这些一二三，最后数目是不固定的，怎么动态的生成大写的一、二？初步想法是标号1变成字符串1，再转换成大写一。。。
  25.                  for(var x = 0; x < aRankArr.length; x++){
  26.                      var oNewLi =  document.createElement('li');
  27.                      // oNewLi.innerHTML = '第'+(x+1)+'名：'+aRankArr[x][0]+'空气质量：<b>'+aRankArr[x][1]+'</b><span class="progress">    <span class="pro-flo" style="width: '+aRankArr[x][1]+'px;"></span></span>';
  28.                      oNewLi.innerHTML = '第'+aSerialNum[x]+'名：'+aRankArr[x][0]+'空气质量：<b>'+aRankArr[x][1]+'</b><span class="progress">    <span class="pro-flo" style="width: '+aRankArr[x][1]+'px;"></span></span>';
  29.                      oResort.appendChild(oNewLi)
  30.                  }
  31.                  oRankBox.style.display = "block";
  32.                  nIndex = 1;
  33.              }else{
  34.                  oError.style.display = "block";
  35.                  oError.innerText = "已是最新排序情况!";
  36.              }
  37.          }

逻辑

解析：

虽说和上一课的结构逻辑都差不多，但是同样学到新的知识点：重点是indexOf()与slice()的配合使用。

  1.  1.js原生的选择器大全
  2.      getElementById(id)  传入一个id名，通过id查找并返回第一个符合条件的对象
  3.      getElementsByTagName(tagname)  返回文档中指定标签的元素数组
  4.      getElementsByName(name)  返回所有name值等于name参数的匹配结果的数组
  5.      getElementsByClassName(class)  返回文档中所有指定类名的元素数组
  6.      querySelector(css selector)  返回第一个符合css选择器选择的元素
  7.      querySelectorAll(css selector)  返回所有符合css选择器的元素数组
  8.  2.typeof()
  9.  3.indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。所以有了indexOf()，我就可以找到“空”字在几号，也能找到“：”在几号，再配合0与length-1，计算后用slice() 得出一段字符的相应内容
  10.      找字符串中某个指定位置的字符：charAt()，比如我说索引2号出来，，这样。
  11.  4.转换
  12.      大写转小写 toLowerCase()
  13.    小写转大写  toUpperCase()
  14.  5.toString() 方法可把一个逻辑值转换为字符串，并返回结果。booleanObject.toString()
  15.  6.遗留问题：如何把1变成一，把10变成十，把193变成一百九十三。。。

汇总

第四课-js基础之dom结构和事件

   

html

  1.  <div class="box">
  2.          <input type="text" placeholder="请输入有效的数字">
  3.          <span class="row">
  4.              <input type="button" value="左侧入">
  5.              <input type="button" value="右侧入">
  6.              <input type="button" value="左侧出">
  7.              <input type="button" value="右侧出">
  8.              <input type="button" value="正排序">
  9.              <input type="button" value="逆排序">
  10.          </span>
  11.          <div class="pop">
  12.              <h4></h4>
  13.              <span class="close">X</span>
  14.          </div>
  15.          <div class="rank-box">
  16.              <ul>
  17.                  <li style="height: 50px;">
  18.                  </li>
  19.                  <li style="height: 5px;">
  20.                  </li>
  21.                  <li style="height: 10px;">
  22.                  </li>
  23.                  <li style="height: 100px;">
  24.                  </li>
  25.              </ul>
  26.              <p class="no-data">没有数据了！</p>
  27.          </div>
  28.      </div>

View htmlCode

css

  1.  body{font:16px "微软雅黑";}
  2.  h3{text-align: center;margin-top:;}
  3.  ul,li{list-style: none;padding:;margin:;display: inline-block;}
  4.  li{width: 10px;background: #4488ff;margin-right: 5px;}
  5.  .clearfix{*zoom:;}
  6.  .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  7.  .box{position:relative;width: auto;margin: 210px auto;padding: 20px;text-align: center;box-shadow: 2px 2px 3px 0px #dedede;border-radius: 5px;border: 1px solid #efefef}
  8.  input,input[type="button"],.rank-box,.pop{border: 1px solid #dedede; border-radius: 5px;}
  9.  label{width: 80px;display: inline-block;text-align: right;}
  10.  input{padding: 5px;}
  11.  input:focus{outline: none;border: 1px solid #4488ff;}
  12.  input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  13.  input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  14.  input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  15.  .error{display: none;color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  16.  .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  17.  .row{margin-top: 10px;}
  18.  .btn{text-align: right;}
  19.  .rank-box{margin-top: 10px;padding: 10px;/*display: none;*/}
  20.  .pop{position: absolute;top:;left: 50%;margin-left: -160px;min-width: 320px;min-height: 150px;line-height: 150px;background: #fff;box-shadow: 2px 2px 3px 0px #dedede;transform: scale(0);transition: transform .31s;}
  21.  .close{position: absolute;top: 10px;right: 10px;width: 20px;line-height: 20px;color: #dedede;transform: rotate(0);transition: transform .31s;}
  22.  .close:hover{color: #333;transform: rotate(180deg);transition: transform .31s;cursor: pointer;}
  23.  .no-data{display: none;font-size: 14px;text-align: center;color: #dedede;margin:;}

css

js

  1.  <script>
  2.          // 预备变量
  3.          var oInput = document.querySelector('input[type="text"]');
  4.          var oRankBox = document.querySelector('.rank-box ul');
  5.          var oNoData = document.querySelector('.no-data');
  6.          var oPop = document.querySelector('.pop');
  7.          var oClose = document.querySelector('.close');
  8.          var oBtns = document.querySelectorAll('input[type="button"]');//通过querySelectorAll事件选取所有的按钮，并利用数组下标的获取方法从选取出来的数组集合中找到对应的元素oBtns[i].onclick = function(){}
  9.          var sInfoBox = oPop.children[0];
  10.          // 预备函数
  11.          function popTrans(num,txt){
  12.              // 弹层动画
  13.              oPop.style.transform = 'scale('+num+')';
  14.              sInfoBox.innerText = txt;
  15.          }
  16.              // 判断数据并插入
  17.          function testValue(status){
  18.              // 数值判断
  19.              var value = oInput.value;
  20.              if(value){
  21.                  if(value >= 0 && value <= 100){//加上判断01的情况，把前边的0去掉
  22.                      if(value[0] == 0 || value.length > 1){
  23.                          // popTrans(1,parseInt(value));//去掉以0开头的数字前边的0
  24.                          if(status == 1){
  25.                              creatLi(parseInt(value),status);
  26.                          }else{
  27.                              creatLi(parseInt(value),status);
  28.                          }
  29.                      }else{
  30.                          if(status == 1){
  31.                              creatLi(value,status);
  32.                          }else{
  33.                              creatLi(value,status);
  34.                          }
  35.                      }
  36.                  }else{
  37.                      if(isNaN(value)){
  38.                          popTrans(1,"数字！数字！纯数字！ok？");
  39.                      }else{
  40.                          popTrans(1,"请输入0-100以内的数字！");
  41.                      }
  42.                  }
  43.              }else{
  44.                          popTrans(1,"请输入内容再点我好吗！");
  45.              }
  46.              oInput.value = null;
  47.          }
  48.              // 插入结构
  49.          function creatLi(num,stat){
  50.              var oLi = document.createElement('li');
  51.              oLi.style.height = num+"px";
  52.              if(stat == 1){
  53.                  oRankBox.insertBefore(oLi,oRankBox.children[0])
  54.              }else{
  55.                  oRankBox.appendChild(oLi)
  56.              }
  57.          }
  58.              // 删除结构
  59.          function delLi(stat){
  60.              var nLength =  oRankBox.children.length;
  61.              if(nLength <= 1){
  62.                  oNoData['style'].display = "block";
  63.              }
  64.              if(nLength == 0){
  65.                  popTrans(1,'没完了？！');
  66.              }else{
  67.                  if(stat == 1){
  68.                      oRankBox.removeChild(oRankBox.children[0]);
  69.                  }else{
  70.                      oRankBox.removeChild(oRankBox.children[(nLength-1)])
  71.                  }
  72.              }
  73.          }
  74.              // 排序
  75.          function sortArr(a,b){
  76.              return a - b;//正序
  77.          }
  78.          function sortArrInver(a,b){
  79.              return b - a;//b-a为倒序
  80.          }
  81.          function rankFun(stat){
  82.              var nLength =  oRankBox.children.length;
  83.              if(nLength == 0){
  84.                  popTrans(1,'没数据排个毛线！');
  85.              }else{
  86.                  var arr = [];
  87.                  var rankArr = [];
  88.                  for(var i = 0; i < nLength; i++){
  89.                      arr[i] = oRankBox.children[i].clientHeight
  90.                  }
  91.                  if(stat == 1){
  92.                      rankArr = arr.sort(sortArr);
  93.                  }else{
  94.                      rankArr = arr.sort(sortArrInver);
  95.                  }
  96.                  // 删除所有结构（倒序遍历删除）
  97.                  for (var b = nLength - 1; b >= 0; b--) {//for循环多次使用，循环的变量不能都用i，会混乱的，这里i改成b
  98.                      oRankBox.removeChild(oRankBox.children[b]);
  99.                  }
  100.                  // 添加新的排序后结构
  101.                  for(var a = 0; a < rankArr.length; a++){
  102.                      creatLi(rankArr[a],1)
  103.                  }
  104.              }
  105.          }
  106.          // 事件函数
  107.          oBtns[0].onclick = function(){
  108.                  // 左侧入按钮事件
  109.                  testValue(1);
  110.          }
  111.          oBtns[1].onclick = function(){
  112.                  testValue(0);
  113.                  // 右侧入按钮事件
  114.          }
  115.          oBtns[2].onclick = function(){
  116.                  // 左侧出按钮事件
  117.                  delLi(1)
  118.          }
  119.          oBtns[3].onclick = function(){
  120.                  // 右侧出按钮事件
  121.                  delLi(0)
  122.          }
  123.          oBtns[4].onclick = function(){
  124.                  // 正排序按钮事件
  125.                  rankFun(1)
  126.                  // this.disabled = true;
  127.                  // 不能盲目进掉，因为还会点击逆排序后再来顺排序！！！
  128.          }
  129.          oBtns[5].onclick = function(){
  130.                  // 逆排序按钮事件
  131.                  rankFun(0)
  132.                  // this.disabled = true;
  133.          }
  134.          oClose.onclick = function(){
  135.              popTrans(0,sInfoBox.innerText);
  136.          }
  137.      </script>

js

总结

  1.  document.querySelector()里边，如果选择类名，一定加点，如果选择id一定加#号，不然根本选不到元素的，添加事件也会报错set property ‘onclick’事件为null！
  2.  insertBefore(newnode,node);【需要两个参数】参数:newnode: 要插入的新节点。node: 指定此节点前插入节点。
  3.  removeChild(node)： 删除节点
  4.  for循环在一个函数中多次使用，是不是循环的变量不能一直都用i，否则会混乱的，可以把i改成b或其他

总结

1011-增加删除提示弹窗

html

  1.  <div class="box">
  2.          <input type="text" placeholder="请输入有效的数字">
  3.          <span class="row">
  4.              <input type="button" value="左侧入">
  5.              <input type="button" value="右侧入">
  6.              <input type="button" value="左侧出">
  7.              <input type="button" value="右侧出">
  8.              <input type="button" value="正排序">
  9.              <input type="button" value="逆排序">
  10.          </span>
  11.          <div class="pop">
  12.              <h4></h4>
  13.              <span class="close">X</span>
  14.          </div>
  15.          <div class="del-pop" style="transform: scale(0)">
  16.              <h4>确定要删除数值<b>50</b>吗？</h4>
  17.              <input type="button" value="确定">
  18.              <input type="button" value="取消">
  19.          </div>
  20.          <div class="rank-box">
  21.              <ul>
  22.                  <li style="height: 50px;">
  23.                  </li>
  24.                  <li style="height: 5px;">
  25.                  </li>
  26.                  <li style="height: 10px;">
  27.                  </li>
  28.                  <li style="height: 100px;">
  29.                  </li>
  30.              </ul>
  31.              <p class="no-data">没有数据了！</p>
  32.          </div>
  33.      </div>

增加del-pop结构

css

  1.  body{font:16px "微软雅黑";}
  2.  h3{text-align: center;margin-top:;}
  3.  ul,li{list-style: none;padding:;margin:;display: inline-block;}
  4.  li{width: 10px;background: #4488ff;margin-right: 5px;}
  5.  .clearfix{*zoom:;}
  6.  .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  7.  .box{position:relative;width: auto;margin: 210px auto;padding: 20px;text-align: center;box-shadow: 2px 2px 3px 0px #dedede;border-radius: 5px;border: 1px solid #efefef}
  8.  input,input[type="button"],.rank-box,.pop,.del-pop{border: 1px solid #dedede; border-radius: 5px;}
  9.  label{width: 80px;display: inline-block;text-align: right;}
  10.  input{padding: 5px;}
  11.  input:focus{outline: none;border: 1px solid #4488ff;}
  12.  input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  13.  input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  14.  input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  15.  .error{display: none;color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  16.  .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  17.  .row{margin-top: 10px;}
  18.  .btn{text-align: right;}
  19.  .rank-box{margin-top: 10px;padding: 10px;/*display: none;*/}
  20.  .pop,.del-pop{position: absolute;top:;left: 50%;margin-left: -160px;min-width: 320px;min-height: 150px;line-height: 150px;background: #fff;box-shadow: 2px 2px 3px 0px #dedede;transform: scale(0);transition: transform .31s;}
  21.  .del-pop{line-height: 30px;top: 40px;}
  22.  .del-pop b{color: #f00}
  23.  .close{position: absolute;top: 10px;right: 10px;width: 20px;line-height: 20px;color: #dedede;transform: rotate(0);transition: transform .31s;}
  24.  .close:hover{color: #333;transform: rotate(180deg);transition: transform .31s;cursor: pointer;}
  25.  .no-data{display: none;font-size: 14px;text-align: center;color: #dedede;margin:;}

增加del-pop样式

js

  1.  // 预备变量
  2.          var oInput = document.querySelector('input[type="text"]');
  3.          var oRankBox = document.querySelector('.rank-box ul');
  4.          var oNoData = document.querySelector('.no-data');
  5.          var oPop = document.querySelector('.pop');
  6.          var oDelPop = document.querySelector('.del-pop');
  7.          var oClose = document.querySelector('.close');
  8.          var oBtns = document.querySelectorAll('input[type="button"]');//通过querySelectorAll事件选取所有的按钮，并利用数组下标的获取方法从选取出来的数组集合中找到对应的元素oBtns[i].onclick = function(){}
  9.          var sInfoBox = oPop.children[0];
  10.          var sDelInfo = oDelPop.children[0].children[0];
  11.          // 预备函数
  12.              // 弹层动画
  13.          function popTrans(popIndex,scale,txt){
  14.              if(popIndex == 1){
  15.                  // 提示数据填写错误弹层
  16.                  oPop.style.transform = 'scale('+scale+')';
  17.                  sInfoBox.innerText = txt;
  18.              }else{
  19.                  // 删除数据的弹层动画
  20.                  oDelPop.style.transform = 'scale('+scale+')';
  21.                  sDelInfo.innerText = txt;
  22.              }
  23.          }
  24.              // 判断数据并插入
  25.          function testValue(status){
  26.              // 数值判断
  27.              var value = oInput.value;
  28.              if(value){
  29.                  if(value >= 0 && value <= 100){//加上判断01的情况，把前边的0去掉
  30.                      if(value[0] == 0 || value.length > 1){
  31.                          // popTrans(1,1,parseInt(value));//去掉以0开头的数字前边的0
  32.                          if(status == 1){
  33.                              creatLi(parseInt(value),status);
  34.                          }else{
  35.                              creatLi(parseInt(value),status);
  36.                          }
  37.                      }else{
  38.                          if(status == 1){
  39.                              creatLi(value,status);
  40.                          }else{
  41.                              creatLi(value,status);
  42.                          }
  43.                      }
  44.                  }else{
  45.                      if(isNaN(value)){
  46.                          popTrans(1,1,"数字！数字！纯数字！ok？");
  47.                      }else{
  48.                          popTrans(1,1,"请输入0-100以内的数字！");
  49.                      }
  50.                  }
  51.              }else{
  52.                          popTrans(1,1,"请输入内容再点我好吗！");
  53.              }
  54.              oInput.value = null;
  55.          }
  56.              // 插入结构
  57.          function creatLi(num,stat){
  58.              var oLi = document.createElement('li');
  59.              oLi.style.height = num+"px";
  60.              if(stat == 1){
  61.                  oRankBox.insertBefore(oLi,oRankBox.children[0])
  62.              }else{
  63.                  oRankBox.appendChild(oLi)
  64.              }
  65.          }
  66.              // 删除弹窗
  67.          function delPop(value,childLI){
  68.              popTrans(2,1,value);
  69.              oBtns[6].onclick = function(){
  70.                      // 确定删除按钮
  71.                      // 关掉弹窗后延迟删除
  72.                  popTrans(2,0,value);
  73.                  setTimeout(function(){
  74.                      oRankBox.removeChild(childLI);
  75.                  },300);
  76.              }
  77.              oBtns[7].onclick = function(){
  78.                      // 确定删除按钮
  79.                      // 不删除只关掉弹窗
  80.                      popTrans(2,0,value);
  81.              }
  82.          }
  83.              // 删除结构
  84.          function delLi(stat){
  85.              var nLength =  oRankBox.children.length;
  86.              if(nLength <= 1){
  87.                  oNoData['style'].display = "block";
  88.              }
  89.              if(nLength == 0){
  90.                  popTrans(1,1,'没完了？！');
  91.              }else{
  92.                  if(stat == 1){
  93.                      var value = parseInt(oRankBox.children[0]['style'].height);
  94.                      var oLI = oRankBox.children[0];
  95.                      delPop(value,oLI);
  96.                  }else{
  97.                      var value = parseInt(oRankBox.children[(nLength-1)]['style'].height);
  98.                      var oLI = oRankBox.children[(nLength-1)];
  99.                      delPop(value,oLI);
  100.                  }
  101.              }
  102.          }
  103.              // 排序
  104.          function sortArr(a,b){
  105.              return a - b;//正序
  106.          }
  107.          function sortArrInver(a,b){
  108.              return b - a;//b-a为倒序
  109.          }
  110.          function rankFun(stat){
  111.              var nLength =  oRankBox.children.length;
  112.              if(nLength == 0){
  113.                  popTrans(1,1,'没数据排个毛线！');
  114.              }else{
  115.                  var arr = [];
  116.                  var rankArr = [];
  117.                  for(var i = 0; i < nLength; i++){
  118.                      arr[i] = oRankBox.children[i].clientHeight
  119.                  }
  120.                  if(stat == 1){
  121.                      rankArr = arr.sort(sortArr);
  122.                  }else{
  123.                      rankArr = arr.sort(sortArrInver);
  124.                  }
  125.                  // 删除所有结构（倒序遍历删除）
  126.                  for (var b = nLength - 1; b >= 0; b--) {//for循环多次使用，循环的变量不能都用i，会混乱的，这里i改成b
  127.                      oRankBox.removeChild(oRankBox.children[b]);
  128.                  }
  129.                  // 添加新的排序后结构
  130.                  for(var a = 0; a < rankArr.length; a++){
  131.                      creatLi(rankArr[a],1)
  132.                  }
  133.              }
  134.          }
  135.          // 事件函数
  136.          oBtns[0].onclick = function(){
  137.                  // 左侧入按钮事件
  138.                  testValue(1);
  139.          }
  140.          oBtns[1].onclick = function(){
  141.                  testValue(0);
  142.                  // 右侧入按钮事件
  143.          }
  144.          oBtns[2].onclick = function(){
  145.                  // 左侧出按钮事件
  146.                  delLi(1)
  147.          }
  148.          oBtns[3].onclick = function(){
  149.                  // 右侧出按钮事件
  150.                  delLi(0)
  151.          }
  152.          oBtns[4].onclick = function(){
  153.                  // 正排序按钮事件
  154.                  rankFun(1)
  155.                  // this.disabled = true;
  156.                  // 不能盲目进掉，因为还会点击逆排序后再来顺排序！！！
  157.          }
  158.          oBtns[5].onclick = function(){
  159.                  // 逆排序按钮事件
  160.                  rankFun(0)
  161.                  // this.disabled = true;
  162.          }
  163.          oClose.onclick = function(){
  164.              popTrans(1,0,sInfoBox.innerText);
  165.          }

增加js的delPop逻辑

1012pm增加

  1.  <script>
  2.          // 预备变量
  3.          var oInput = document.querySelector('input[type="text"]');
  4.          var oRankBox = document.querySelector('.rank-box ul');
  5.          var oNoData = document.querySelector('.no-data');
  6.          var oPop = document.querySelector('.pop');
  7.          var oDelPop = document.querySelector('.del-pop');
  8.          var oClose = document.querySelector('.close');
  9.          var oBtns = document.querySelectorAll('input[type="button"]');//通过querySelectorAll事件选取所有的按钮，并利用数组下标的获取方法从选取出来的数组集合中找到对应的元素oBtns[i].onclick = function(){}
  10.          var sInfoBox = oPop.children[0];
  11.          var sDelInfo = oDelPop.children[0].children[0];
  12.          // 增加点击柱状图则删除本柱状图的效果
  13.          function liDelSelf(){
  14.              for(var i = 0; i < oRankBox.children.length; i++){
  15.                  oRankBox.children[i].onclick = function(){
  16.                      var value = parseInt(this.style.height);
  17.                      var childLI = this;
  18.                      delPop(value,childLI);
  19.                  }
  20.              }
  21.          }
  22.          liDelSelf();
  23.          // 预备函数
  24.              // 弹层动画
  25.          function popTrans(popIndex,scale,txt){
  26.              if(popIndex == 1){
  27.                  // 提示数据填写错误弹层
  28.                  oPop.style.transform = 'scale('+scale+')';
  29.                  sInfoBox.innerText = txt;
  30.              }else{
  31.                  // 删除数据的弹层动画
  32.                  oDelPop.style.transform = 'scale('+scale+')';
  33.                  sDelInfo.innerText = txt;
  34.              }
  35.          }
  36.              // 判断数据并插入
  37.          function testValue(status){
  38.              // 数值判断
  39.              var value = oInput.value;
  40.              if(value){
  41.                  if(value >= 0 && value <= 100){//加上判断01的情况，把前边的0去掉
  42.                      if(value[0] == 0 || value.length > 1){
  43.                          // popTrans(1,1,parseInt(value));//去掉以0开头的数字前边的0
  44.                          if(status == 1){
  45.                              creatLi(parseInt(value),status);
  46.                          }else{
  47.                              creatLi(parseInt(value),status);
  48.                          }
  49.                      }else{
  50.                          if(status == 1){
  51.                              creatLi(value,status);
  52.                          }else{
  53.                              creatLi(value,status);
  54.                          }
  55.                      }
  56.                  }else{
  57.                      if(isNaN(value)){
  58.                          popTrans(1,1,"数字！数字！纯数字！ok？");
  59.                      }else{
  60.                          popTrans(1,1,"请输入0-100以内的数字！");
  61.                      }
  62.                  }
  63.              }else{
  64.                          popTrans(1,1,"请输入内容再点我好吗！");
  65.              }
  66.              oInput.value = null;
  67.          }
  68.              // 插入结构
  69.          function creatLi(num,stat){
  70.              var oLi = document.createElement('li');
  71.              oLi.style.height = num+"px";
  72.              if(stat == 1){
  73.                  oRankBox.insertBefore(oLi,oRankBox.children[0])
  74.              }else{
  75.                  oRankBox.appendChild(oLi)
  76.              }
  77.              liDelSelf();//重新插入的元素，要再次遍历到oRankBox的children集合里边，才能给新增加的结构绑定点击事件。
  78.          }
  79.              // 删除弹窗
  80.          function delPop(value,childLI){
  81.              popTrans(2,1,value);
  82.              oBtns[6].onclick = function(){
  83.                      // 确定删除按钮
  84.                      // 关掉弹窗后延迟删除
  85.                  popTrans(2,0,value);
  86.                  setTimeout(function(){
  87.                      oRankBox.removeChild(childLI);
  88.                  },300);
  89.              }
  90.              oBtns[7].onclick = function(){
  91.                      // 确定删除按钮
  92.                      // 不删除只关掉弹窗
  93.                      popTrans(2,0,value);
  94.              }
  95.          }
  96.              // 删除结构
  97.          function delLi(stat){
  98.              var nLength =  oRankBox.children.length;
  99.              if(nLength <= 1){
  100.                  oNoData['style'].display = "block";
  101.              }
  102.              if(nLength == 0){
  103.                  popTrans(1,1,'没完了？！');
  104.              }else{
  105.                  if(stat == 1){
  106.                      var value = parseInt(oRankBox.children[0]['style'].height);
  107.                      var oLI = oRankBox.children[0];
  108.                      delPop(value,oLI);
  109.                  }else{
  110.                      var value = parseInt(oRankBox.children[(nLength-1)]['style'].height);
  111.                      var oLI = oRankBox.children[(nLength-1)];
  112.                      delPop(value,oLI);
  113.                  }
  114.              }
  115.          }
  116.              // 排序
  117.          function sortArr(a,b){
  118.              return a - b;//正序
  119.          }
  120.          function sortArrInver(a,b){
  121.              return b - a;//b-a为倒序
  122.          }
  123.          function rankFun(stat){
  124.              var nLength =  oRankBox.children.length;
  125.              if(nLength == 0){
  126.                  popTrans(1,1,'没数据排个毛线！');
  127.              }else{
  128.                  var arr = [];
  129.                  var rankArr = [];
  130.                  for(var i = 0; i < nLength; i++){
  131.                      arr[i] = oRankBox.children[i].clientHeight
  132.                  }
  133.                  if(stat == 1){
  134.                      rankArr = arr.sort(sortArr);
  135.                  }else{
  136.                      rankArr = arr.sort(sortArrInver);
  137.                  }
  138.                  // 删除所有结构（倒序遍历删除）
  139.                  for (var b = nLength - 1; b >= 0; b--) {//for循环多次使用，循环的变量不能都用i，会混乱的，这里i改成b
  140.                      oRankBox.removeChild(oRankBox.children[b]);
  141.                  }
  142.                  // 添加新的排序后结构
  143.                  for(var a = 0; a < rankArr.length; a++){
  144.                      creatLi(rankArr[a],1)
  145.                  }
  146.              }
  147.          }
  148.          // 事件函数
  149.          oBtns[0].onclick = function(){
  150.                  // 左侧入按钮事件
  151.                  testValue(1);
  152.          }
  153.          oBtns[1].onclick = function(){
  154.                  testValue(0);
  155.                  // 右侧入按钮事件
  156.          }
  157.          oBtns[2].onclick = function(){
  158.                  // 左侧出按钮事件
  159.                  delLi(1)
  160.          }
  161.          oBtns[3].onclick = function(){
  162.                  // 右侧出按钮事件
  163.                  delLi(0)
  164.          }
  165.          oBtns[4].onclick = function(){
  166.                  // 正排序按钮事件
  167.                  rankFun(1)
  168.                  // this.disabled = true;
  169.                  // 不能盲目进掉，因为还会点击逆排序后再来顺排序！！！
  170.          }
  171.          oBtns[5].onclick = function(){
  172.                  // 逆排序按钮事件
  173.                  rankFun(0)
  174.                  // this.disabled = true;
  175.          }
  176.          oClose.onclick = function(){
  177.              popTrans(1,0,sInfoBox.innerText);
  178.          }
  179.      </script>

js增加liDelSelf函数

第五课-js之排序算法练习

本来这一课上一周就做完了，一直做项目拖到今天才整理，顺便把要求加了一层，限制了队列元素的数量总长度。2017-10-23  15:09:10

          

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>第五期作业-排序算法</title>
  6.      <link rel="stylesheet" href="style.css">
  7.  </head>
  8.  <body>
  9.      <div class="box" style="display: block;">
  10.          <input type="text" placeholder="请输入1-100以内的数字">
  11.          <input type="button" value="插入" id="add">
  12.          <input type="button" value="排序" id="rank">
  13.          <p style="color: red;"></p>
  14.      </div>
  15.      <ul class="rank-box">
  16.      </ul>
  17.  </body>
  18.  </html>

html

  1.  body{font:16px "微软雅黑";}
  2.  h4{text-align: center;margin:;}
  3.  ul,li{list-style: none;padding:;margin:;display: inline-block;}
  4.  li{width: 10px;background: #4488ff;margin-right: 5px;}
  5.  li:hover{cursor: pointer;}
  6.  .clearfix{*zoom:;}
  7.  .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  8.  .box,.box-button{position:relative;width: auto;margin: 10px auto;padding: 20px;text-align: center;box-shadow: 2px 2px 3px 0px #dedede;border-radius: 5px;border: 1px solid #efefef}
  9.  .box{display: inline-block;min-width: 320px;}
  10.  .box ul{display: block; margin: 20px 0;}
  11.  .arr{text-align: center;}
  12.  input,input[type="button"]{border: 1px solid #dedede; border-radius: 5px;}
  13.  label{width: 80px;display: inline-block;text-align: right;}
  14.  input{padding: 5px;}
  15.  input:focus{outline: none;border: 1px solid #4488ff;}
  16.  input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  17.  input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  18.  input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  19.  .error{display: none;color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  20.  .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  21.  .rank-box{width: 100%; text-align: center;margin: 10px 0;}
  22.  .info{color: #333;}
  23.  .info div{padding:20px;border: 1px solid #4488ff;}
  24.  .info h4{text-align: left;}
  25.  .info ol{padding:;}
  26.  .info li{margin: 5px 0;background: none;height: auto;width: auto;text-align: left;display: block;list-style: decimal inside;}

css

  1.  <script>
  2.                  // 变量初始化
  3.          var oInfo = document.querySelector(".box p");
  4.          var oBox = document.querySelector(".rank-box");
  5.          var oInput = document.querySelector("input[type='text']");
  6.          var oBtnA = document.getElementById("add");
  7.          var oBtnR = document.getElementById("rank");
  8.          var arr = [20, 10, 60, 80, 45, 23, 42, 38, 61, 92, 10, 13, 4, 87, 1, 19, 14, 82];
  9.          // 删除结构
  10.          function delLI(){
  11.              var nLiLength = oBox.children.length;
  12.              if(nLiLength <= 0){
  13.                  console.log("没有结构可删");
  14.              }else{
  15.                  for (var b = nLiLength - 1; b >= 0; b--) {
  16.                      oBox.removeChild(oBox.children[b]);
  17.                  }
  18.              }
  19.          }
  20.          // 创造Li
  21.          function createLI(value){
  22.              var oLi = document.createElement("li");
  23.              oLi.style.height = value+"px";
  24.              oBox.appendChild(oLi);
  25.          }
  26.          // 插入li
  27.          function addLI(arr){
  28.              for (var i = 0; i < arr.length; i++) {
  29.                  createLI(arr[i])
  30.              }
  31.          }
  32.          // 冒泡排序
  33.          function dubbleSort(arrays){
  34.              for (var i = 0; i < arrays.length-1; i++) {
  35.                  for (var j = 0; j < arrays.length-1-i; j++) {
  36.                      if(arrays[j]>arrays[j+1]){
  37.                          var temp = arrays[j];
  38.                          arrays[j] = arrays[j+1];
  39.                          arrays[j+1] = temp;
  40.                      }
  41.                  }
  42.              }
  43.              return arrays;
  44.          }
  45.          // 事件
  46.          addLI(arr);//开始先把已有的数据插入到结构中。
  47.          oInput.onfocus = function(){
  48.              oInfo.innerText = ""
  49.          }
  50.                  // 添加事件（点击插入按钮运行）
  51.          oBtnA.onclick = function(){
  52.              var liHeight = parseInt(oInput.value);
  53.              if(isNaN(liHeight)){
  54.                  oInfo.innerText = "请输入正确的数字！";
  55.                  oInput.value = '';
  56.              }else if(liHeight > 100 || liHeight < 1){
  57.                  oInfo.innerText = "请输入1-100以内的数字!";
  58.                  oInput.value = '';
  59.              }else{
  60.                  // 判断数值是否已经大于60个
  61.                  if(arr.length >= 60){
  62.                      oInfo.innerText = "已经60个了，差不多行了！";
  63.                  }else{
  64.                      createLI(liHeight)
  65.                      // 点击插入后将input里边的内容清空
  66.                      // 方法：value等于空
  67.                      oInput.value = '';
  68.                      // 由于这次是排序一组数组，而不是从结构中获取数据以生成新数组来排序，所以每次动态添加一个li，都要把其高度值也push到arr里边，日后排序只动这个数组，省去了获取结构数值生成数组的步骤！
  69.                      arr.push(liHeight);
  70.                  }
  71.              }
  72.  
  73.          }
  74.                  // 执行排序数组
  75.          oBtnR.onclick = function(){
  76.              var rankArr = dubbleSort(arr);
  77.              delLI();
  78.              addLI(rankArr);
  79.          }
  80.      </script>

js

新的理念总结：

  1.  这次排序是调整一组数组的值，
  2.  而不是从结构中获取数据再生成新数组来排序，
  3.  所以每次动态添加一个li结构后，
  4.  都要及时地把其高度值也push到arr里边，
  5.  让arr的数据随时更改，
  6.  这样一来，
  7.  日后排序只动这个数组，
  8.  也就可以省去了重新去html中获取结构数值来生成数组的步骤！

第六课-- 数组和字符串深入练习

在这个伟大的节日，我完成了对现在的我来说，伟大的效果。2017-10-24  19:35:53

先上图：

        

html

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>第六期-数组和字符串的操作</title>
  6.       <meta name="author" content="郭菊锋,tel-15127145529,qq-702004176">
  7.      <link rel="stylesheet" href="style.css">
  8.  </head>
  9.  <body>
  10.      <div class="box">
  11.          <textarea placeholder="请输入有效的数字" class="text-data" ></textarea>
  12.          <span class="row">
  13.              <input type="button" value="左侧入">
  14.              <input type="button" value="右侧入">
  15.              <input type="button" value="左侧出">
  16.              <input type="button" value="右侧出">
  17.              <input type="text" placeholder="请输入要查找的字段" class="search">
  18.              <input type="button" value="查找">
  19.          </span>
  20.          <div class="pop">
  21.              <h4></h4>
  22.              <span class="close">X</span>
  23.          </div>
  24.          <div class="del-pop" style="transform: scale(0)">
  25.              <h4>确定要删除结构"<b>50</b>"吗？</h4>
  26.              <input type="button" value="确定">
  27.              <input type="button" value="取消">
  28.          </div>
  29.          <div class="rank-box">
  30.              <ul>
  31.                  <li>输入</li>
  32.                  <li>文字</li>
  33.                  <li>测试</li>
  34.                  <li>效果</li>
  35.              </ul>
  36.              <p class="no-data">没有数据了！</p>
  37.          </div>
  38.      </div>
  39.      <script src="test6.js"></script>
  40.  </body>
  41.  </html>

html结构代码

css

  1.  body{font:16px "微软雅黑";}
  2.  h3{text-align: center;margin-top:;}
  3.  ul,li{list-style: none;padding:;margin:;display: inline-block;}
  4.  li{width: auto;margin-right: 5px;border: 1px solid #4488ff;padding: 5px 10px;border-radius: 5px;}
  5.  li:hover{cursor: pointer;background: #4488ff;color: #fff;}
  6.  .clearfix{*zoom:;}
  7.  .clearfix:after{content: "";clear: both;display: block;visibility: hidden;height:;}
  8.  .box{position:relative;width: auto;margin: 210px auto;padding: 20px;text-align: center;box-shadow: 2px 2px 3px 0px #dedede;border-radius: 5px;border: 1px solid #efefef}
  9.  input,input[type="button"],.rank-box,.pop,.del-pop{border: 1px solid #dedede; border-radius: 5px;}
  10.  label{width: 80px;display: inline-block;text-align: right;}
  11.  input{padding: 5px;}
  12.  input:focus{outline: none;border: 1px solid #4488ff;}
  13.  input[type="button"]{padding: 5px 7px;background: #f1f1f1;}
  14.  input[type="button"]:hover{cursor: pointer;background: #4488ff;border: 1px solid #fff; color: #fff;}
  15.  input[type="button"]:focus{outline: none;border: 1px solid #fff;}
  16.  .error{display: none;color: red;font-size: 12px;padding: 5px 0;margin:;padding-left: 85px;}
  17.  .info{color: #4488ff;font-size: 12px;text-align: right;margin:;padding-top: 5px;}
  18.  .row{margin-left: 5px; vertical-align: super;}
  19.  .btn{text-align: right;}
  20.  .rank-box{margin-top: 10px;padding: 10px;/*display: none;*/}
  21.  .pop,.del-pop{position: absolute;top:;left: 50%;margin-left: -160px;min-width: 320px;min-height: 150px;line-height: 150px;background: #fff;box-shadow: 2px 2px 3px 0px #dedede;transform: scale(0);transition: transform .31s;}
  22.  .del-pop{line-height: 30px;top: 40px;}
  23.  .del-pop b{color: #f00}
  24.  .close{position: absolute;top: 10px;right: 10px;width: 20px;line-height: 20px;color: #dedede;transform: rotate(0);transition: transform .31s;}
  25.  .close:hover{color: #333;transform: rotate(180deg);transition: transform .31s;cursor: pointer;}
  26.  .no-data{display: none;font-size: 14px;text-align: center;color: #dedede;margin:;}
  27.  textarea{width: 200px;height: 80px;}
  28.  .search{margin-left: 25px;}
  29.  .mask{
  30.      color: red;
  31.      border-color: red;
  32.  }

css

js

  1.  window.onload = function(){
  2.      var oBtns = document.querySelectorAll('.row input[type="button"]');
  3.      var oTxtInput = document.querySelector('.row input[type="text"]');
  4.      var oConfBtn = document.querySelectorAll('.del-pop input[type="button"]');
  5.      var oTxtData = document.querySelector('.text-data');
  6.      var oNoData = document.querySelector('.no-data');
  7.      var oPopBox = document.querySelector('.pop');
  8.      var oDelPop = document.querySelector('.del-pop');
  9.      var oClose = document.querySelector('.close');
  10.      var oUl = document.querySelector(".rank-box ul");
  11.  
  12.      var aTxt = [];
  13.  
  14.      delSelf();// 点击li删除自身
  15.  
  16.      oBtns[0].onclick = function(){    //从左边插入结构
  17.          createLI(0)
  18.      }
  19.      oBtns[1].onclick = function(){    //从右边插入结构
  20.          createLI(1)
  21.      }
  22.      oBtns[2].onclick = function(){    //从左边删除结构
  23.          deleteLI(0)
  24.      }
  25.      oBtns[3].onclick = function(){    //从右边删除结构
  26.          deleteLI(1)
  27.      }
  28.      oBtns[4].onclick = function(){    //查找对应结构
  29.          searchTxt()
  30.      }
  31.      oClose.onclick = function(){    // 关闭弹窗
  32.          oPop(0,0,"")
  33.      }
  34.      // 封装
  35.      // 删除li自身
  36.      function delSelf(){
  37.          var oLiSlef = document.querySelectorAll(".rank-box ul li");
  38.          for (var i = 0; i < oLiSlef.length; i++) {
  39.              oLiSlef[i].onclick = function(){
  40.                  oPop(1,1,this.innerText);
  41.                  confirmPop(this);
  42.              }
  43.          }
  44.      }
  45.      // 插入结构函数
  46.      function createLI(v){
  47.          var sTxt = oTxtData.value;
  48.          aTxt = sTxt.split(/[,，.。、\s\n]/);//重点注意这个正则的设计
  49.          if(aTxt[0] == ""){//判断没输入内容时不插入结构
  50.               oPop(0,1,"姐姐，你没写东西让我插入什么啊！");
  51.          }else{
  52.              for (var i = 0; i < aTxt.length; i++) {
  53.                  if(aTxt[i] != ""){
  54.                      var oLi = document.createElement("li");
  55.                      oLi.innerText = aTxt[i];
  56.                      if(v == 0){
  57.                          oUl.insertBefore(oLi,oUl.children[0]);
  58.                      }else{
  59.                          oUl.appendChild(oLi);
  60.                      }
  61.                  }
  62.              }
  63.          }
  64.          oTxtData.value = "";//文本框中的文字使用过后，清空文本框
  65.          delSelf();//给新加的li添加上删除自身的效果，不至于新加的就没有这个功能
  66.      }
  67.      // 删除结构
  68.      function deleteLI(v){
  69.          var nLilength = oUl.children.length;
  70.          if(nLilength <= 0){
  71.              oPop(0,1,"没了还删删删个球球！");
  72.          }else{
  73.              if(v == 0){//判断是左删除还是右删除
  74.                  var sToptxt = oUl.children[0].innerText;
  75.                  var delIndex = oUl.children[0];
  76.              }else{
  77.                  var sToptxt = oUl.children[(nLilength-1)].innerText;
  78.                  var delIndex = oUl.children[(nLilength-1)];
  79.              }
  80.              oPop(1,1,sToptxt);
  81.              confirmPop(delIndex);
  82.          }
  83.      }
  84.  
  85.      // 重点来了，查找字段！！
  86.      function searchTxt(){
  87.          var searchV = oTxtInput.value;
  88.          var oLiSlef = document.querySelectorAll(".rank-box ul li");
  89.          if(oLiSlef.length <= 0){
  90.              oPop(0,1,"没数据你要找什么！")
  91.          }else{
  92.              for (var i = 0; i < oLiSlef.length; i++) {
  93.                  oLiSlef[i].className = "";
  94.                  var onlySearchV = searchV.split("");//这里注意了，只传一个空的双引号(即不传参)
  95.                  for (var a = 0; a < onlySearchV.length; a++) {
  96.                      if(oLiSlef[i].innerText.indexOf(onlySearchV[a]) >= 0){
  97.                          oLiSlef[i].className = "mask";
  98.                      }
  99.                  }
  100.              }
  101.          }
  102.          //老套路 最后清空文本框
  103.          oTxtInput.value = "";
  104.      } 
  105.  
  106.      // 弹窗函数
  107.      function oPop(type,num,txt){
  108.          if(type == 0){//一类弹窗，只弹出提示层
  109.              oPopBox.style.transform = "scale("+num+")";
  110.              oPopBox.children[0].innerText = txt;
  111.          }else{//一类弹窗，弹出删除警告层
  112.              oDelPop.style.transform = "scale("+num+")";
  113.              oDelPop.children[0].children[0].innerText = txt;
  114.          }
  115.      }
  116.  
  117.      // 删除提示弹窗
  118.      function confirmPop(site){
  119.          // 确定删除
  120.          oConfBtn[0].onclick = function(){
  121.              oPop(1,0,"");
  122.              // 点击确定删除结构时，删除的动作要比弹窗晚.2s(时间看效果定)，不然看不到删的那个动态
  123.              setTimeout(function(){
  124.                  oUl.removeChild(site);
  125.                  var nLilength = oUl.children.length;
  126.                  if(nLilength == 0){
  127.                      oNoData.style.display = "block";
  128.                  }
  129.              },200);
  130.          }
  131.          // 取消删除
  132.          oConfBtn[1].onclick = function(){
  133.              oPop(1,0,"")
  134.          }
  135.      }
  136.  
  137.  }

javascript

总结

  1.  1、window.onload()函数每次必须用！
  2.      又一次把js文件放到顶部，然后说找不到某结构，导致改了半天的代码发现是顺序问题！！
  3.  2、js获取textarea里边的文字内容：
  4.      innerText(空值)取不到，innerHTML(空值)也取不到！
  5.      只能使用value，刚开始value是空值取不到，输入数据后再取就能找到了。
  6.      但是f12看结构中，textarea的value还是没有或者还是自己之前在结构中设置的默认的值。
  7.  3.插入结构的方法：
  8.      appendChild是向后插入，那向前插入呢?
  9.      答：insertBefore是向前插入，不过名字写对了但是参数没写对，他接受两个参数！！
  10.      第一个参数是要插入的节点；
  11.      第二个参数是要在谁之前插入；
  12.      总是忘掉需要两个参数，可能是因为自己对insertBefore的理解有误，insertBefore是向指定位置插入结构而不是向第一个结构之前插入，所以他每次在你想要往第一个位置插入时，是需要传入第一个位置的结构的，
  13.      在本次项目中，我要往ul的第一个li之前插入结构，所以我用ul.children[0]这个命令找到第一个li结构。
  14.      oUl.insertBefore(oLi,oUl.children[0]);这么写就是往第一个位置插入li
  15.  4.字符串截取，将一段字符串分隔截成数组 — — split()方法，
  16.      我把split写错了，多谢了一个2成了splite
  17.  5.以下这一点不会写
  18.      允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔
  19.      aTxt = sTxt.split("，");只能切割一个，怎么切割多个？用判断的方法？
  20.          aTxt = sTxt.split(",") || aTxt = sTxt.split("、")这个写法肯定不对，因为或符号，是有一个成立就停止执行了，也就是有逗号和顿号的时候，他执行了逗号就停止了。是解析不到后边顿号的命令的
  21.          if(sTxt.indexOf(",") > 0){
  22.              aTxt = sTxt.split(",");
  23.          }else if(sTxt.indexOf("，") > 0){
  24.              aTxt = sTxt.split("，");
  25.          }else if(sTxt.indexOf("、") > 0){
  26.              aTxt = sTxt.split("、");
  27.          }else if(sTxt.indexOf(" ") > 0){
  28.              aTxt = sTxt.split(" ");
  29.          }else if(sTxt.indexOf(" ") > 0){
  30.              aTxt = sTxt.split(" ");
  31.          }这种判断的方法，可以后期改成switch语句来判断，但是他只能解决分隔符唯一的时候，也就是以上任何一种分隔符单一输入，都是可以分割的。如果遇到逗号和顿号混合输入的时候，这种写法就不成立了。
  32.          最后恍然大悟，用正则啊！
  33.  6.switch语句的用法与写法：
  34.      1).注意标点符号，冒号和分号的使用和位置
  35.  7.下拉刷新怎么写？
  36.      window.location.reload()
  37.  8.删除结构removeChild()，
  38.      1).参数还是记不住，也就是用法不清楚
  39.          只接受一个位置信息（下标）输入要删除的结构所在的位置，就能把他删除。想想，你让程序去扇人，你总要告诉程序欠打的在哪吧！
  40.      2).如何在从左边删除还是从右边删除，那就是传哪里的位置了。
  41.          单个的删除一个方法
  42.              ——从结构左边删除，就是传入所有子元素的第一个子元素，下标是0
  43.                  oUl.removeChild(oUl.childs[0])
  44.              ——从结构右边删除，最后一个元素的下标，就是(children.length-1)
  45.                  oUl.removeChild(oUl.children[(oUl.children.length-1)])
  46.      4).两种删除的函数方法（指一次性全部删除结构！）：
  47.              因为，dom会把空节点当做文本节点算进去，所以如果正向（i++）这样删除的话，会删不干净只能删掉一半【这是因为当你把索引为0的子节点删除后那么很自然的原来索引为1节点此时它的索引变成0了，而这时变量i已经变成1了，程序继续走时就会删除原先索引为２的现在为1的节点这样程序运行的结果就是只删除了一半的子节点】，但是下边这段代码用if判断nodeType，如果是1就删除，不会浪费i的名额，这样就能全部删掉。
  48.                  function clearText() {
  49.                      var oUl=document.getElementById("ulBox");
  50.                      // 在此完成该函数
  51.                      var childs = oUl.childNodes;
  52.                      for(var i=0;i<childs.length;i++){
  53.                              if(childs[i].nodeType == 1){
  54.                                      oUl.removeChild(childs[i]);
  55.                              }
  56.                      }
  57.                  }
  58.              第二种解决这种bug的方法，是倒着删除，从后往前边删除直到最后全部删除。
  59.                  function removeLi(){
  60.                      var childs = oUl.childNodes;
  61.                      for(var i = childs.length - 1;i > 0; i--){
  62.                           oUl.removeChild(childs[i])
  63.                      }
  64.                  }
  65.  9.查找字段，然后标红
  66.      利用的原理是:把输入的文字利用indexOf查找，如果在搜索范围内，这个结构里边的innerText的indexof大于0，则表面他有这个字，那么就执行标红处理。然后下次执行标红寻找之前，把上一轮标过红的全清除，不至于重叠。
  67.      问题：只能查一个字，或者一组100%匹配的文字，怎么支持模糊搜索？比如只要这组词中的任何一个字匹配上的都标红？
  68.      那就涉及到把传进来要搜索的字切割开来然后一个一个的查找。
  69.      利用split("")方法,不传参（只传一个空字符串参数）就能把结果劈成一个一个字的特殊功能来做
  70.      另外其实可以用正则表达式来做！

注：总结只是记得我自己开发过程中的疑问点，因人而异，不适用于全部人！

特殊的几个地方：

  1. 一、split（）方法传一对双引号[或单引号]，就会返回字符串切割成一个字一个字的效果！
  2. 二、indexOf()方法用来查找字符串的方法，因为他返回的是一个位置值，也就是找到的话，会返回0以上的数，找不到返回-1，利用他的返回值，可以判断出这段字符串中有没有我们要找的东西。
  3. 三、正则表达式的使用，用来匹配多个条件的字符串。因要求而异，这里不做特殊笔记，，，
  4. 四、removeChild方法，删除单个结构和删除所有结构的详细方法总结，见总结笔记中。

完

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

百度前端学院js课堂作业合集+分析(更新中...)的更多相关文章

  1. Vue-小demo、小效果 合集（更新中...）

    (腾讯课堂学习小demo:https://ke.qq.com/course/256052) 一.简单的指令应用 --打击灭火器 图片素材点击腾讯课堂的链接获取       html: <!DOC ...

  2. ubuntu相关软件合集(持续更新中)

    本人使用的是Ubuntu-Kylin14.04,自带了日历.输入法.优客助手等易于上手的应用.省的每次安装完原生的系统再麻烦的安装,下面介绍默认应用外的相关常用软件: 一.Keylock Applic ...

  3. 安装 Ubuntu 21.04 后必备的绝佳应用大合集(持续更新中)

    @ 目录 一.Google Chrome 浏览器 1.下载 2.安装 3.设置搜索引擎 二.火焰截图(替代QQ截图) 1.简介: 2.安装: 3.设置快捷键: 三.VLC视频播放器(替代Potplay ...

  4. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  5. JS - 二叉树算法实现与遍历 (更新中...)

    一.关于二叉树: 截图来自:https://segmentfault.com/a/1190000000740261 温馨提示:学习以及使用二叉树概念,心中永远有这么一个图,对于理解和接受二叉树有很大的 ...

  6. js小功能合集：计算指定时间距今多久、评论树核心代码、字符串替换和去除。

    1.计算指定时间距今多久 var date1=new Date('2017/02/08 17:00'); //开始时间 var date2=new Date(); //当前时间 var date3=d ...

  7. python习题作业合集（持续更新……）

    作业: 1.简述位,字节关系 2.请写出“天才”分别用utf-8和gbk编码所占位数 3.如果有一个变量num = 14,请使用int的方法,得到改变量最少可以用多少个二进制位表示 4.写代码,有如下 ...

  8. 前端 Java Python等资源合集大放送

    如果需要学习视频,欢迎关注[JAVA乐园]微信公众号,回复[领取资源]菜单一键领取以下所有200G干货资源,获取更多有用技术干货.文档资料.所有文档会持续更新,欢迎关注一起成长! 1.vue全套 Vu ...

  9. 百度前端学院-基础学院-第20到21天之setTimeOut与setInterval

    setTimeout()可以使用clearTimeout()关闭 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 注意:setInterv ...

随机推荐

  1. 在Eclipse中设置进行JNI的头文件编译方法（转 http://blog.csdn.net/mirkerson/article/details/17187109）

    这两天在搞NDK开发,JNI的头文件进行编译的时候,要跑到对应的class文件路径下(通常是工程的bin目录),进行编译生成,很是不便,也容易出错,所以考虑在Eclipse中作为外部工具引入,所以便查 ...

  2. 如​何​屏​蔽​C​h​r​o​m​e​、​S​a​f​a​r​i​等​W​e​b​k​i​t​内​核​浏​览​器​文​本​框​和​文​本​域​的​高​亮​边​框​、​可​变​大​小​等​自​动​外​观​处​理

    1.高亮外框的取消 input { outline: none; } textarea { outline: none; } 如上,使用CSS的outline就可以实现 2.文本域缩放功能的取消 也是 ...

  3. CentOS6.8下安装MySQL5.6

    一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | grep mysql 有的话通过下面的命令来卸载掉 rpm -e mysql //普通删除模式 rpm -e ...

  4. OSG 坑爹的Android example

    本人3D编程方面超级菜鸟,因为项目需要,接触了一些Open Scene Graph(OSG)引擎的相关编程工作.首先我得承认,OSG这个引擎超级牛,无论是渲染效果和效率,都没的说,很棒.但是,OSG提 ...

  5. [mobile angular ui]MAUI中的font awesome图标

    MAUI中用font awesome替换了glyphicon,但是FA中都有哪些可用的图标呢,在网上搜了一张font awesome的对照表,使用时记着把其中的icon-xxx替换为fa-xxx就可以 ...

  6. fitnesse页面增加认证

    一.增加用户认证1. 只增加一个认证用户:java -jar fitnesse.jar -a username:password 2. 增加多个认证用户(明文密码)    2.1 新建一个passwo ...

  7. Android 内存

    memory usage of this progress under 15MB for 1GB RAM device Android内存机制分析下篇:分析APP内存使用情况http://mobile ...

  8. less语法（一）变量与extend

    摘要: 作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS.less文件是 ...

  9. web实现QQ头像上传截取功能

    由于最近一段时间比较忙,发现好久没写博客了,给大家分享下最近搞的logo上传截取功能.在实现这个功能之前找了一些jq的插件,最后选定了cropper在github中可以找到. 具体的思路是1:选择上传 ...

  10. Eclipse------用Tomcat运行项目后出现:严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener

    Eclipse中Tomcat运行项目后出现: 严重: Error configuring application listener of class org.springframework.web.c ...