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>
效果：
时间： 2024-11-06 23:02:08