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 </div>
39 <div id="places">
40 <input type="checkbox" name="chx" value="Sunday"/>香港Sunday
41 <input type="checkbox" name="chx" value="Monday"/>澳门Monday
42 <input type="checkbox" name="chx" value="Tuesday"/>深圳Tuesday
43 <input type="checkbox" name="chx" value="Wednesday"/>台北Wednesday
44 <input type="checkbox" name="chx" value="Thursday"/>乌镇Thursday
45 <input type="checkbox" name="chx" value="Friday"/>丽江Friday
46 <input type="checkbox" name="chx" value="Saturday"/>杭州Saturday
47 </div>
48
49 <div id="allplaces">
50 <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选
51 </div>
52
53 <div>
54
55 <div class="item">
56 <label>星期天</label>
57 <ul id="Sunday"></ul>
58
59 <div class="item">
60 <label>星期一</label>
61 <ul id="Monday"></ul>
62 </div>
63
64 <div class="item">
65 <label>星期二</label>
66 <ul id="Tuesday"></ul>
67 </div>
68
69 <div class="item">
70 <label>星期三</label>
71 <ul id="Wednesday"></ul>
72 </div>
73
74 <div class="item">
75 <label>星期四</label>
76 <ul id="Thursday"></ul>
77 </div>
78
79 <div class="item">
80 <label>星期五</label>
81 <ul id="Friday"></ul>
82 </div>
83
84 <div class="item">
85 <label>星期六</label>
86 <ul id="Saturday"></ul>
87 </div>
88
89 </div>
90 </div>
91 <div style="clear:both"></div>
92 <hr/>
93 <div id="time_area"></div>
94
95
96 </body>
97 <script>
98 //点击“全选”， 所有地方都选上
99 function _check_all(obj)
100 {
101 console.log(obj.value)
102 var nodes = document.getElementById("places").childNodes;
103 if(obj.checked)
104 {
105 for (var i=0; i < nodes.length; i++)
106 {
107 if(nodes[i].type == "checkbox")
108 {
109 nodes[i].checked = true;
110 }
111 }
112 }
113 else
114 {
115 for (var i=0; i < nodes.length; i++)
116 {
117 if(nodes[i].type == "checkbox")
118 {
119 nodes[i].checked = false;
120 }
121 }
122 }
123 }
124
125 window.onload = function(){
126
127 //删除时间段
128 var oUls = document.getElementsByTagName("ul");
129 for(var i=0; i <oUls.length; i++){
130 oUls[i].addEventListener("click", function(event){
131 var evt = event|| window.event;
132 var obj = evt.target || evt.srcElement;
133 var nodeName = obj.nodeName.toLowerCase();
134 if(nodeName == "b"){
135 obj.parentNode.parentNode.removeChild(obj.parentNode);
136 }
137 });
138 }
139
140 //星期一 到 星期天 input checkbox click事件绑定, 与 “全选” checkbox之间的关系判断
141 var oChilds = document.getElementById("places").childNodes;
142 for (var i=0; i < oChilds.length; i++)
143 {
144 if(oChilds[i].type == "checkbox")
145 {
146 oChilds[i].addEventListener("click", function(event){
147 var nodes = oChilds;
148 if(this.checked)
149 {
150 for (var i=0; i < nodes.length; i++)
151 {
152 if((nodes[i].type == "checkbox") && !nodes[i].checked)
153 {
154 document.getElementById("checkall").checked = false;
155 return;
156 }
157 }
158 document.getElementById("checkall").checked = true;
159 }
160 else
161 {
162 document.getElementById("checkall").checked = false;
163 }
164 });
165 }
166 }
167 }
168
169 //保存时间
170
171 Array.prototype.contains = function(obj){
172 var i = this.length;
173 while (i--)
174 {
175 if (this[i] === obj)
176 {
177 return true;
178 }
179 }
180 return false;
181 }
182
183 function _save_time(time_range){
184 var oChilds = document.getElementById("places").childNodes;
185 for(var i=0; i < oChilds.length; i++){
186 if(oChilds[i].type == "checkbox" && oChilds[i].checked)
187 {
188 var oLi = document.createElement("li");
189 var oSpan = document.createElement("span");
190 var oB = document.createElement("b");
191
192 //拿到上一次保存的数据，如果存在则不添加，否则就添加
193 var oUl = document.getElementById(oChilds[i].value);
194 var nextVal = "19:30:00-21:00:00";
195 var oLiPrevVal = [];
196
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 </script>
216 </html>
