首页 > 代码库 > backup1
backup1
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 else115 {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 else162 {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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。