javascript Array.push pop unshit shit

HTML代码:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <title>Document</title>
  7   <style type="text/css">
  8     *{font-family:Consolas;font-style: italic}
  9     .showbox {
 10       width: 900px;
 11       margin:0 auto;
 12       border: 1px solid #ccc;
 13       border-radius: 5px;
 14       padding: 10px;
 15     }
 16     #listbox {
 17       list-style: inside;
 18       list-style-type: decimal;
 19       width: 400px;
 20       height: 400px;
 21       border: 0;
 22       border-radius: 10px;
 23       font-size: 20px;
 24       padding: 5px;
 25       display: block;
 26       border: 1px solid #ccc;
 27       background: #eee;
 28       overflow: hidden;
 29       float: left;
 30     }
 31     #listbox li {
 32       color: #330
 33     }
 34     button,input{
 35       padding:0;
 36       color: #369;
 37       width: 100px;
 38       line-height: 170%;
 39       border: 1px solid #eee;
 40       font-size: 15px;
 41       text-align: center;
 42       vertical-align: middle;
 43       border-radius: 5px
 44     }
 45     button:hover{background: #ddd}
 46     input{width:400px;text-align: left;padding:5px;font-size: 25px;line-height: 100%}
 47     .note{color:real;float:left;width:460px;padding:50px 10px 0 10px;text-indent: 1em;text-transform:capitalize;line-height: 180%}
 48     .note:first-letter{font-size: 40px}
 49     .showbox:after{content: ".";display: block;clear: both;height: 0; visibility: hidden}
 50   </style>
 51 </head>
 52 
 53 <body>
 54   <div class="showbox">
 55    <h1>javascript Array.push pop unshit shit</h1>
 56     <input type="text" id="txt_input" />
 57     <button id="btn_push">push Itme</button>
 58     <button id="btn_pop">pop Item</button>
 59     <button id="unshit">unshit Item</button>
 60     <button id="shit">shit Item</button>
 61     <ul id="listbox"></ul>
 62     <div class="note">this is javascript demo for Array.push() Array.pop() Array.unshit() Array.shit() ([email protected],2014.12.28 23:05)</div>
 63   </div>
 64 </body>
 65 <script type="text/javascript">
 66   function addItems(txtid, listid, btnpushid, btnpopid, btnunshitid, btnshitid) {
 67     var btn_push = document.getElementById(btnpushid);
 68     var btn_pop = document.getElementById(btnpopid);
 69     var btn_unshit = document.getElementById(btnunshitid);
 70     var btn_shit = document.getElementById(btnshitid);
 71     var txt = document.getElementById(txtid);
 72     var list = document.getElementById(listid);
 73     var list_array = [];
 74     btn_push.addEventListener("click", function (e) {
 75       var input_value = txt.value;
 76       input_value = input_value.replace(/(^\s*)|(\s*$)/, "");
 77       if (input_value !== "") {
 78         list_array.push(input_value);
 79         bindItems(list_array, list);
 80       }
 81 
 82     }, true);
 83     btn_pop.addEventListener("click", function (e) {
 84       list_array.pop();
 85       bindItems(list_array, list);
 86     }, true);
 87     btn_unshit.addEventListener("click", function (e) {
 88       var input_value = txt.value;
 89       input_value = input_value.replace(/(^\s*)|(\s*$)/, "");
 90       if (input_value !== "") {
 91         list_array.unshift(input_value)
 92         bindItems(list_array, list);
 93       }
 94     }, true);
 95     btn_shit.addEventListener("click", function (e) {
 96       list_array.shift();
 97       bindItems(list_array, list);
 98     }, true);
 99 
100     var bindItems = function (arr, tagid) {
101       //clear listbox
102       var tagid_len = tagid.childNodes.length;
103       while (tagid_len > 0) {
104         tagid.removeChild(tagid.childNodes[tagid_len - 1]);
105         tagid_len--;
106       }
107       //bind list
108       if (arr instanceof Array) {
109         for (var i = 0; i < arr.length; i++) {
110           var li = document.createElement("li");
111           li.appendChild(document.createTextNode(arr[i]));
112           tagid.appendChild(li);
113         }
114       }
115 
116     };
117   }
118   addItems("txt_input", "listbox", "btn_push", "btn_pop", "unshit", "shit");
119 </script>
120 
121 </html>
View Code

效果:

javascript Array.push pop unshit shit_第1张图片

你可能感兴趣的:(JavaScript)