1 <html>
2 <head>
3 <title></title>
4 <style>
5 b{
6 display: block;
7 width: 7px;
8 height: 7px;
9 position: absolute;
10 right: 6px;
11 top: 7px;
12 background: url(20130606B.png) no-repeat -37px -62px;
13 cursor: pointer;
14 }
15
16 label{width: 57px; height: 20px;float:left;margin-top:5px;}
17
18 ul{float:left; height: auto;margin-top: 2px;list-style:none;margin-left: 10px;}
19 ul li{
20 float: left;
21 position: relative;
22 height: 20px;
23 padding: 0 20px 0 5px;
24 border: 1px solid #E6E6E6;
25 margin-right: 15px;
26 margin-bottom: 2px;
27 line-height: 20px;
28 }
29
30 .item{border-bottom: 1px solid #f9f9f9; clear:both;height:25px;}
31 </style>
32 </head>
33 <body>
34 <div>
35 <input type="text" name="" id="time-s"/>
36 <input type="text" name="" id="time-e"/>
37 <input type="button" value="保存" id="save" onclick="_save_time()"/>
38 <input type="button" id="getall" name="chx" value="获取" onclick="_get_all(this)"/>
39 </div>
40 <div id="places">
41 <input type="checkbox" name="chx" value="Sunday"/>香港Sunday
42 <input type="checkbox" name="chx" value="Monday"/>澳门Monday
43 <input type="checkbox" name="chx" value="Tuesday"/>深圳Tuesday
44 <input type="checkbox" name="chx" value="Wednesday"/>台北Wednesday
45 <input type="checkbox" name="chx" value="Thursday"/>乌镇Thursday
46 <input type="checkbox" name="chx" value="Friday"/>丽江Friday
47 <input type="checkbox" name="chx" value="Saturday"/>杭州Saturday
48 </div>
49
50 <div id="allplaces">
51 <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选
52 </div>
53
54 <div>
55
56 <div class="item">
57 <label>星期天</label>
58 <ul id="Sunday"></ul>
59
60 <div class="item">
61 <label>星期一</label>
62 <ul id="Monday"></ul>
63 </div>
64
65 <div class="item">
66 <label>星期二</label>
67 <ul id="Tuesday"></ul>
68 </div>
69
70 <div class="item">
71 <label>星期三</label>
72 <ul id="Wednesday"></ul>
73 </div>
74
75 <div class="item">
76 <label>星期四</label>
77 <ul id="Thursday"></ul>
78 </div>
79
80 <div class="item">
81 <label>星期五</label>
82 <ul id="Friday"></ul>
83 </div>
84
85 <div class="item">
86 <label>星期六</label>
87 <ul id="Saturday"></ul>
88 </div>
89
90 </div>
91 </div>
92 <div style="clear:both"></div>
93 <hr/>
94 <div id="time_area"></div>
95
96
97 </body>
98 <script>
99 //点击“全选”， 所有地方都选上
100 function _check_all(obj)
101 {
102 console.log(obj.value)
103 var nodes = document.getElementById("places").childNodes;
104 if(obj.checked)
105 {
106 for (var i=0; i < nodes.length; i++)
107 {
108 if(nodes[i].type == "checkbox")
109 {
110 nodes[i].checked = true;
111 }
112 }
113 }
114 else
115 {
116 for (var i=0; i < nodes.length; i++)
117 {
118 if(nodes[i].type == "checkbox")
119 {
120 nodes[i].checked = false;
121 }
122 }
123 }
124 }
125
126 window.onload = function(){
127
128 //删除时间段
129 var oUls = document.getElementsByTagName("ul");
130 for(var i=0; i <oUls.length; i++){
131 oUls[i].addEventListener("click", function(event){
132 var evt = event|| window.event;
133 var obj = evt.target || evt.srcElement;
134 var nodeName = obj.nodeName.toLowerCase();
135 if(nodeName == "b"){
136 obj.parentNode.parentNode.removeChild(obj.parentNode);
137 }
138 });
139 }
140
141 //星期一 到 星期天 input checkbox click事件绑定, 与 “全选” checkbox之间的关系判断
142 var oChilds = document.getElementById("places").childNodes;
143 for (var i=0; i < oChilds.length; i++)
144 {
145 if(oChilds[i].type == "checkbox")
146 {
147 oChilds[i].addEventListener("click", function(event){
148 var nodes = oChilds;
149 if(this.checked)
150 {
151 for (var i=0; i < nodes.length; i++)
152 {
153 if((nodes[i].type == "checkbox") && !nodes[i].checked)
154 {
155 document.getElementById("checkall").checked = false;
156 return;
157 }
158 }
159 document.getElementById("checkall").checked = true;
160 }
161 else
162 {
163 document.getElementById("checkall").checked = false;
164 }
165 });
166 }
167 }
168 }
169
170 //保存时间
171
172 Array.prototype.contains = function(obj){
173 var i = this.length;
174 while (i--)
175 {
176 if (this[i] === obj)
177 {
178 return true;
179 }
180 }
181 return false;
182 }
183
184 function _save_time(time_range){
185 var oChilds = document.getElementById("places").childNodes;
186 for(var i=0; i < oChilds.length; i++){
187 if(oChilds[i].type == "checkbox" && oChilds[i].checked)
188 {
189 var oLi = document.createElement("li");
190 var oSpan = document.createElement("span");
191 var oB = document.createElement("b");
192
193 //拿到上一次保存的数据，如果存在则不添加，否则就添加
194 var oUl = document.getElementById(oChilds[i].value);
195 var nextVal = "19:30:00-21:00:00";
196 var oLiPrevVal = [];
197 var oLiPrevNodes = oUl.childNodes;
198 console.log(oLiPrevNodes);
199 for(var j=0; j<oLiPrevNodes.length; j++){
200 oLiPrevVal.push(oLiPrevNodes[j].childNodes[0].innerHTML);
201 console.log(oLiPrevVal);
202 }
203
204 if(!oLiPrevVal.contains(nextVal))
205 {
206 oSpan.innerHTML = nextVal;
207 oLi.appendChild(oSpan);
208 oLi.appendChild(oB);
209 oUl.appendChild(oLi);
210 }
211
212 }
213 }
214 }
215
216 function _get_all(obj){
217 var oUls = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
218 console.log(oChilds);
219
220 var oVals = [];
221 for(var i=0; i<oUls.length; i++){
222 var oNodes = document.getElementById(oUls[i]);
223 //console.log(oNodes.childNodes);
224
225 var oChilds = oNodes.childNodes;
226 var perVals = "";
227 for(var j=0; j< oChilds.length; j++){
228 console.log(oChilds[j].childNodes[0].innerHTML);
229 perVals += oChilds[j].childNodes[0].innerHTML + ";";
230 }
231
232 var obj = oUls[i] + "," + perVals;
233 oVals.push(obj);
234 }
235
236 console.log(oVals);
237 }
238 </script>
239 </html>
浙公网安备 33010602011771号