标签：des style blog color os io 数据 for
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>
标签：des style blog color os io 数据 for
原文地址：http://www.cnblogs.com/yiliweichinasoft/p/3888064.html
