百度前端学院--斌斌学院--demo---5

最新推荐文章于 2024-11-15 19:51:40 发布

weixin_30532369

最新推荐文章于 2024-11-15 19:51:40 发布

阅读量107

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/gaoxuerong123/p/7230993.html

版权

本文介绍了一个使用HTML、CSS及JavaScript实现的列表动态增删与排序功能的示例。通过用户界面输入数字并选择操作按钮，可以在列表的左侧或右侧添加元素，同时也能从任意一端移除元素。此外，还提供了一键排序的功能，使列表中的所有项按大小顺序排列。

摘要由CSDN通过智能技术生成

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style>
  7             ul{
  8                 height: 120px;
  9                 margin: 20px;
 10                 background-color: #eee;
 11                 position: relative;
 12             }
 13             li{                
 14                 width: 25px;                
 15                 background-color: lightsalmon;
 16                 float: left;
 17                 color: white;
 18                 border: 1px solid #000;
 19                 list-style: none;
 20                 margin: 0 2px;
 21                 text-align: center;
 22                 
 23             }
 24         </style>
 25     </head>
 26     <body>
 27         <input type="text" maxlength="50" id="in"></input>
 28         <input type="button" value="左侧进" class="a" ></input>
 29         <input type="button" value="右侧进" class="b" ></input>
 30         <input type="button" value="左侧出" class="c" ></input>
 31         <input type="button" value="右侧出" class="d" ></input>
 32         <input type="button" value="排序" class="e" ></input>
 33         <ul id="out"></ul>
 34     </body>
 35     <script>
 36         var ins=document.getElementById("in");
 37         var out=document.getElementById("out");
 38         var leftin = document.getElementsByClassName("a")[0];
 39         var rightin = document.getElementsByClassName("b")[0];
 40         var leftout = document.getElementsByClassName("c")[0];
 41         var rightout = document.getElementsByClassName("d")[0];
 42         var pai_xu = document.getElementsByClassName("e")[0];
 43         //插入
 44         function insert(direction){
 45             var numbers = document.getElementsByTagName("li");
 46             if(ins.value===""){
 47                 alert("内容为空呢，你说怎嘛办？");
 48                 ins.focus();
 49             }else if(isNaN(ins.value)){
 50                 alert("必须输入数字呢？");
 51                 ins.value="";
 52                 ins.focus();
 53                 }else if(ins.value>100||ins.value<10){
 54                     alert("输入数字不在范围10-100之内");
 55                      ins.value="";
 56                     ins.focus();                 
 57                     }else if(numbers>60){
 58                         alert("输入个数超出限制60个");
 59                         return false;
 60                         }else
 61                         {
 62                             var oli=document.createElement("li");
 63                             oli.style.height=ins.value+"px";
 64                             oli.innerHTML=ins.value;
 65                             if(direction==="left"){
 66                                 out.insertBefore(oli,out.firstChild);
 67                             }else{
 68                                     out.appendChild(oli);
 69                             }
 70                         }
 71             
 72         }
 73         //删除
 74         //console.log(out);
 75         //console.log(out.childNodes.length);
 76          function del(direction){
 77              if(out.childNodes.length<=0){
 78                  alert("没有东西删除了,你还想删除神马呢？删神马呢？");
 79                  return false;
 80              }else{
 81                  if(direction==="left"){
 82                      alert("删除数字"+out.firstChild.innerHTML);
 83                     out.removeChild(out.firstChild);
 84                 }else{
 85                     alert("删除数字"+out.lastChild.innerHTML);
 86                     out.removeChild(out.lastChild);
 87                 }
 88              }
 89          }
 90          //排序
 91         function sort(){
 92              var temp;
 93              var number_temp;              
 94               var k = document.getElementById("out").getElementsByTagName("li");//获取所有的li标签               
 95               var count_li=k.length;//获取li的长度
 96              while(count_li>0){
 97                  for(var j=0;j<count_li-1;j++){     
 98                      if(parseFloat(k[j].style.height)>parseFloat(k[j+1].style.height)){//打脸，一定要加parseFloat，因为k[j+1].style.height得到的是字符串
 99                          temp= k[j].style.height;//图形高度交换                         
100                          number_temp=k[j].innerHTML;//图形中数字交换                         
101                          k[j].style.height=k[j+1].style.height;                     
102                          k[j].innerHTML=k[j+1].innerHTML;
103                          k[j+1].style.height=temp;
104                          k[j+1].innerHTML=number_temp;
105                      }
106                  }
107                  count_li--;
108              }
109          }
110         //点击操作
111         leftin.onclick=function(){
112             insert("left");
113         }
114         rightin.onclick=function(){
115             insert("right");
116         }
117         leftout.onclick=function(){
118             del("left");
119         }
120         rightout.onclick=function(){
121             del("right");
122         }
123         pai_xu.onclick=function(){
124             sort();
125         }
126     </script>
127 </html>