首页 > 代码库 > 百度前端学院--斌斌学院--demo---4

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

2024-11-04 02:39:38   205人阅读

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             li{
 8                 width: 50px;
 9                 height: 50px;
10                 background-color: red;
11                 float: left;
12                 color: white;
13                 font-size: 18px;
14                 border: 1px solid #000;
15                 list-style: none;
16             }
17         </style>
18     </head>
19     <body>
20         <input type="text" maxlength="50" id="in"></input>
21         <input type="button" value="左侧进" class="a" ></input>
22         <input type="button" value="右侧进" class="b" ></input>
23         <input type="button" value="左侧出" class="c" ></input>
24         <input type="button" value="右侧出" class="d" ></input>
25         <ul id="out"></ul>
26     </body>
27     <script>
28         var ins=document.getElementById("in");
29         var out=document.getElementById("out");
30         var leftin = document.getElementsByClassName("a")[0];
31         var rightin = document.getElementsByClassName("b")[0];
32         var leftout = document.getElementsByClassName("c")[0];
33         var rightout = document.getElementsByClassName("d")[0];
34         //插入
35         function insert(direction){
36             if(ins.value===""){
37                 alert("内容为空呢，你说怎嘛办？");
38                 ins.focus();
39             }else if(isNaN(ins.value)){
40                 alert("必须输入数字呢？");
41                 ins.value="";
42                 ins.focus();
43             }else{
44                 var oli=document.createElement("li");
45                 oli.innerHTML=ins.value;
46                 if(direction==="left"){
47                     out.insertBefore(oli,out.firstChild);
48                 }else{
49                     out.appendChild(oli);
50                 }
51             }
52         }
53         //删除
54         console.log(out);
55         console.log(out.childNodes.length);
56          function del(direction){
57              if(out.childNodes.length<=0){
58                  alert("没有东西删除了。。。");
59                  return false;
60              }else{
61                  if(direction==="left"){
62                      alert("删除数字"+out.firstChild.innerHTML);
63                     out.removeChild(out.firstChild);
64                 }else{
65                     alert("删除数字"+out.lastChild.innerHTML);
66                     out.removeChild(out.lastChild);
67                 }
68              }
69          }
70         //点击操作
71         leftin.onclick=function(){
72             insert("left");
73         }
74         rightin.onclick=function(){
75             insert("right");
76         }
77         leftout.onclick=function(){
78             del("left");
79         }
80         rightout.onclick=function(){
81             del("right");
82         }
83     </script>
84 </html>

 

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


联系
我们