checkbox

父节点访问子节点

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <script type="text/javascript">
 6     function test() {
 7         var domString = "";
 8         if (!document.getElementById || !document.createTextNode) {
 9             return;
10         }
11         var demoList = document.getElementById("evenlist");
12         if(demoList.hasChildNodes()){
13             var ch = demoList.childNodes;
14             for(var i = 0;i<ch.length;i++){
15                 domString += ch[i].nodeName+ '\n';
16             }
17             alert(domString);
18         }
19 
20     }
21     window.onload=test;
22 </script>
23 <title>父节点访问子节点</title>
24 </head>
25 <body>
26     <ul id="evenlist">
27         <li>list 1</li>
28         <li>list 2</li>
29         <li><a href="http://www.baidu.com">百度一下</a></li>
30         <li>list 4</li>
31     </ul>
32 </body>
33 </html>

 

2.有关与checkbox的内容，一张漂亮的table

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title></title>
  6 <style type=text/css>
  7 BODY {
  8     margin: 0px;
  9     FONT-SIZE: 12px;
 10     FONT-FAMILY: ";宋体"; , "; Verdana "; , "; Arial "; , "; Helvetica "; , ";
 11     sans-serif ";;
 12     background-color: #ffffff; /*#BEBFD9;*/
 13     scrollbar-face-color: #EAEAF2;
 14     scrollbar-highlight-color: #FFFFFF;
 15     scrollbar-shadow-color: #9395C0;
 16     scrollbar-3dlight-color: #F3F3F8;
 17     scrollbar-arrow-color: #9395C0;
 18     scrollbar-track-color: #F3F3F8;
 19     scrollbar-darkshadow-color: #F3F3F8;
 20 }
 21 
 22 table {
 23     border: 0px;
 24 }
 25 
 26 td {
 27     font: normal 12px 宋体;
 28 }
 29 
 30 img {
 31     vertical-align: bottom;
 32     border: 0px;
 33 }
 34 
 35 a {
 36     font: normal 12px 宋体;
 37     color: #111111;
 38     text-decoration: none;
 39 }
 40 
 41 a:hover {
 42     color: #6C70AA;
 43     text-decoration: underline;
 44 }
 45 
 46 .sec_menu {
 47     border-left: 1px solid white;
 48     border-right: 1px solid white;
 49     border-bottom: 1px solid white;
 50     overflow: hidden;
 51     background: #FBFBFC;
 52 }
 53 
 54 .menu_title {
 55     
 56 }
 57 
 58 .menu_title span {
 59     position: relative;
 60     top: 2px;
 61     left: 8px;
 62     color: #4A4F80;
 63     font-weight: bold;
 64 }
 65 
 66 .menu_title2 {
 67     
 68 }
 69 
 70 .menu_title2 span {
 71     position: relative;
 72     top: 2px;
 73     left: 8px;
 74     color: #596099;
 75     font-weight: bold;
 76 }
 77 
 78 input,select,Textarea {
 79     font-family: 宋体, Verdana, Arial, Helvetica, sans-serif;
 80     font-size: 12px;
 81 }
 82 
 83 .admin_tab_title {
 84     background: #8486B7;
 85     color: #FFFFFF;
 86     padding: 5px;
 87 }
 88 -->
 89 </style>
 90 </head>
 91 <body>
 92     <br>
 93     <br>
 94     <br>
 95     <form name='form1' method='post' action='?action=saveedit'>
 96         <table width='770' border='0' align='center' cellpadding='0'
 97             cellspacing='1' class='tablecolor'>
 98             <tr class='banner'>
 99                 <td height='55' align='center'><strong>管理管理员</strong></td>
100             </tr>
101         </table>
102         <table width='770' border='0' align='center' cellpadding='3'
103             cellspacing='1' class='tablecolor'>
104 
105             <tr class='tablebody'>
106                 <td width='200' height='25' align='center' bgcolor='#8486B7'
107                     style='color: #ffffff; height: 35'>管理员账号</td>
108                 <td bgcolor='#E3E3E3'><input name='adminname' type='text'
109                     id='adminname' value='' maxlength='20'></td>
110             </tr>
111             <tr class='tablebody'>
112                 <td height='25' align='center' bgcolor='#8486B7'
113                     style='color: #ffffff; height: 35'>管理员密码</td>
114                 <td bgcolor='#E3E3E3'><input name='adminpwd' type='password'
115                     value='' maxlength='20'> &nbsp;至少5位</td>
116             </tr>
117             <tbody id='tr1' style='display: block'>
118                 <tr class='tablebody'>
119                     <td height='25' align='center' bgcolor='#8486B7'
120                         style='color: #ffffff; height: 35'>管理员权限</td>
121                     <td bgcolor='#E3E3E3'><input name='G0' type='checkbox' value=1>
122                         &nbsp;常规设置&nbsp; <input name='G1' type='checkbox' value=1>
123                         &nbsp;企业信息设置&nbsp; <input name='G2' type='checkbox' value=1>
124                         &nbsp;新闻与公告设置&nbsp;&nbsp;&nbsp; <input name='G3' type='checkbox'
125                         value=1> &nbsp;产品与服务设置&nbsp; <br> <input name='G5'
126                         type='checkbox' value=1> &nbsp;附加信息设置&nbsp;&nbsp; <input
127                         name='G6' type='checkbox' value=1> &nbsp;国际原油价格设置&nbsp; <input
128                         name='G7' type='checkbox' value=1> &nbsp;成品油价格设置&nbsp; <input
129                         name='G8' type='checkbox' value=1> &nbsp;首页动画设置&nbsp;</td>
130                 </tr>
131             </tbody>
132             <tbody id='tr2' style='display: block'>
133                 <tr class='tablebody'>
134                     <td height='25' align='center' bgcolor='#8486B7'
135                         style='color: #ffffff; height: 35'>产品与服务类别</td>
136                     <td bgcolor='#E3E3E3'><input name='H0' type='checkbox'
137                         value=15>&nbsp;产品&nbsp; <input name='H1' type='checkbox'
138                         value=16>&nbsp;加油站安全常识&nbsp; <input name='H2'
139                         type='checkbox' value=17>&nbsp;服务&nbsp; <input name='H3'
140                         type='checkbox' value=19>&nbsp;商业客户中心&nbsp; <input
141                         name='H4' type='checkbox' value=20> &nbsp;仓储中心&nbsp;</td>
142                 </tr>
143             </tbody>
144             <tr class='tablebody'>
145                 <td height='25' align='center' bgcolor='#8486B7'
146                     style='color: #ffffff; height: 35'>超级管理员选项</td>
147                 <td bgcolor='#E3E3E3'><input name='IsSuper' type='checkbox'
148                     value=1 onClick='javascript:fnTr();'> &nbsp;<font color=red>超级管理员</font>
149                 </td>
150             </tr>
151             <tr class='tablebody'>
152                 <td height='45' align='center'>&nbsp;</td>
153                 <td><input type='hidden' name='id' value=''><input
154                     type='submit' name='Submit' value='提 交'> &nbsp; <input
155                     type='reset' name='Submit2' value='重 置'></td>
156             </tr>
157 
158         </table>
159     </form>
160     <script language="javascript">
161         function fnTr() {
162             if (document.getElementsByName('IsSuper')[0].checked == true) {
163                 document.getElementById('tr1').style.display = "none";
164                 document.getElementById('tr2').style.display = "none";
165             } else {
166                 document.getElementById('tr1').style.display = "block";
167                 document.getElementById('tr2').style.display = "block";
168             }
169         }
170         fnTr();
171     </script>
172 </body>
173 </html>

3.日历的做法

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <html>
  3 <head>
  4 <title>超漂亮的JS日历控件</title>
  5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
  6 <style type="text/css">
  7 * {
  8     font: 12px;
  9     letter-spacing: 0px;
 10 }
 11 
 12 body {
 13     background-color: #E5E9F2;
 14     overflow: hidden;
 15     margin: 0;
 16     border: 0px;
 17 }
 18 
 19 #titleYear {
 20     text-align: center;
 21     padding-top: 3px;
 22     width: 120px;
 23     height: 20px;
 24     border: solid #E5E9F2;
 25     border-width: 0px 1px 1px 0px;
 26     background-color: #A4B9D7;
 27     color: #000;
 28     cursor: default;
 29 }
 30 
 31 #weekNameBox {
 32     width: 282px;
 33     border-bottom: 0;
 34 }
 35 
 36 .weekName {
 37     text-align: center;
 38     padding-top: 4px;
 39     width: 40px;
 40     height: 20px;
 41     border: solid #E5E9F2;
 42     border-width: 0px 1px 1px 0px;
 43     background-color: #C0D0E8;
 44     color: #243F65;
 45     cursor: default;
 46 }
 47 
 48 .controlButton {
 49     font-family: Webdings;
 50     font: 9px;
 51     text-align: center;
 52     padding-top: 2px;
 53     width: 40px;
 54     height: 20px;
 55     border: solid #E5E9F2;
 56     border-width: 0px 1px 1px 0px;
 57     background-color: #A4B9D7;
 58     color: #243F65;
 59     cursor: default;
 60 }
 61 
 62 .Ctable {
 63     width: 282px;
 64     margin-bottom: 20px;
 65 }
 66 
 67 .Ctable span {
 68     font: 9px verdana;
 69     font-weight: bold;
 70     color: #243F65;
 71     text-align: center;
 72     padding-top: 4px;
 73     width: 40px;
 74     height: 26px;
 75     border: solid #C0D0E8;
 76     border-width: 0px 1px 1px 0px;
 77     cursor: default;
 78 }
 79 
 80 .Cdate {
 81     background-color: #E5E9F2;
 82 }
 83 
 84 .Ctable span.OtherMonthDate {
 85     color: #999;
 86     background-color: #f6f6f6;
 87 }
 88 
 89 .selectBox {
 90     cursor: hand;
 91     font: 9px verdana;
 92     width: 80px;
 93     position: absolute;
 94     border: 1px solid #425E87;
 95     overflow-y: scroll;
 96     overflow-x: hidden;
 97     background-color: #fff;
 98     FILTER: progid : DXImageTransform.Microsoft.Shadow ( Color = #999999,
 99         offX = 10, offY = 10, direction = 120, Strength = 5 );
100     SCROLLBAR-FACE-COLOR: #E5E9F2;
101     SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;
102     SCROLLBAR-SHADOW-COLOR: #A4B9D7;
103     SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;
104     SCROLLBAR-ARROW-COLOR: #000000;
105     SCROLLBAR-TRACK-COLOR: #eeeee6;
106     SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
107 }
108 
109 .selectBox nobr {
110     padding: 0px 0px 2px 5px;
111     width: 100%;
112     color: #000;
113     letter-spacing: 2px;
114     text-decoration: none;
115 }
116 </style>
117 <script language="javascript">
118 // cody by [STAR].sjz 2003-10-31
119 // 说明：返回值为 一个字符串
120 // 格式如下：
121 // 使用方法： 
122 // var dataString = showModalDialog("calendar.htm", "dd日mm月yyyy年", "dialogWidth:286px;dialogHeight:221px;status:no;help:no;");
123 var userFormatString;
124 if(window.dialogArguments ==null)
125 {
126  userFormatString = "yyyy-mm--dd";
127 }
128 else
129 {
130  userFormatString = window.dialogArguments;
131 }
132 with(new Date()){
133  var Nyear = getYear();
134  var Nmonth =  getMonth() +1;
135  var Ndate =  getDate();
136 }
137 window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);
138 window.document.onclick = function(){
139  var obj = window.event.srcElement;
140  if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
141  {
142   try{
143    window.currentActiveItem.runtimeStyle.cssText = "";
144   }
145   catch(e){ }
146   Nyear = obj.id.split("-")[0];
147   Nmonth = obj.id.split("-")[1];
148   Ndate = obj.id.split("-")[2];
149   window.currentActiveItem = obj;
150   window.currentSelectDate = window.currentActiveItem.id;
151   window.currentActiveItem.runtimeStyle.cssText = "background:url(/jscss/demoimg/201002/right.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
152  }
153 }
154  function dataObj(year,month,date)  
155 {
156  this.year  = year
157  this.month = month
158  this.date  =  date
159  this.getDateString =
160   function(formatString)
161   {
162    return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)
163   }
164 }
165 window.onload = function(){
166  window.document.attachEvent("onclick" , doCmd);
167  window.document.attachEvent("onmouseover" , buttonOver);
168  window.document.attachEvent("onmouseout" , buttonOut);
169  window.document.attachEvent("onmousedown" , buttonDown);
170  window.document.attachEvent("onmouseup" , buttonUp);
171  window.document.attachEvent("ondblclick" ,
172    function()
173    {
174      var obj = window.event.srcElement;
175      if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
176      {
177       var mydate = new dataObj(obj.id.split("-")[0] ,  obj.id.split("-")[1] ,  obj.id.split("-")[2] );
178       window.returnValue = mydate.getDateString(userFormatString)
179       window.close();
180      }
181    }
182  );
183  document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth);
184  document.all.weekNameBox.insertAdjacentHTML("afterBegin",makeWeekNameHtmlStr());
185  document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth);
186  window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
187  window.document.all.calendarBox.show = show;
188  window.currentActiveItem = window.document.getElementById(currentSelectDate);
189  if( window.currentActiveItem )
190   window.currentActiveItem.click();
191  window.document.all.calendarBox.show();
192 }
193 function starCalendar(year,month){
194  this.year = year;
195  this.month = month;
196  this.monthTable = function(){
197     var aMonth=new Array();
198     for(i=1;i<7;i++)aMonth[i]=new Array(i);
199     var dCalDate=new Date(this.year, this.month-1, 1);
200     var iDayOfFirst=dCalDate.getDay();
201     var iDaysInMonth=new Date(this.year, this.month, 0).getDate();
202     var iOffsetLast=new Date(this.year, this.month-1, 0).getDate()-iDayOfFirst+1;
203     var iDate = 1;
204     var iNext = 1;
205     for (d = 0; d < 7; d++)
206     aMonth[1][d] = (d<iDayOfFirst)?(-iDayOfFirst+d+1):iDate++;
207     for (w = 2; w < 7; w++)
208    for (d = 0; d < 7; d++)
209     aMonth[w][d] = iDate++;
210     return aMonth;
211  }
212 }
213 function makeWeekNameHtmlStr(){
214  var tmpStr="";
215  var weekName = ["日","一","二","三","四","五","六"];
216  for(var i=0;i<7;i++)tmpStr+="<span class=weekName>"+weekName[i]+"</span>";
217  return tmpStr;
218 }
219 function makeCalendarHtmlStr(year,month){
220  window.theCalendar = new starCalendar(year,month);
221  var theCaArr = theCalendar.monthTable();
222  var theDaysInMonth = new Date(year, month, 0).getDate();
223  var theCaHtml = "<div class=Ctable>";
224  for(var i=1;i<7;i++)
225   for(var j=0;j<7;j++)
226    theCaHtml = theCaHtml+"<span class="+( (theCaArr[i][j]<1 || theCaArr[i][j]>theDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr[i][j])+">"+starCaTran(year,month,theCaArr[i][j]).split("-")[2]+"</span>";
227  return theCaHtml+"</div>";
228 }
229 function starCaTran(year,month,date){
230  with(new Date(year,month-1,date))
231   return getYear() + "-" +(getMonth()+1) + "-" + getDate();
232 }
233 function TranYearMonthTitle(year,month){
234  with(new Date(year,month-1,1))
235   return "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px;' onclick=showMore(1940,2050,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + getYear() + "</span>" + "年" + "<span style='text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px;' onclick=showMore(1,12,this.innerHTML) onmouseover=\"this.runtimeStyle.cssText='color:#fff;'\" onmouseout=\"this.runtimeStyle.cssText=''\" onpropertychange=showC()>" + (getMonth()+1) + "</span>" + "月" ;
236 }
237 function showC(){
238    if(event.propertyName != "innerHTML")return;
239    window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName("span")[0].innerHTML);
240    window.theCalendar.month =  new Number(document.all.titleYear.getElementsByTagName("span")[1].innerHTML);
241    window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);
242    window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();
243 }
244 function showMore(starNum,endNum,selectedValue){
245  var obj = window.event.srcElement;
246  var selectedIndex = selectedValue - starNum;
247  if(obj.selectBox){
248   obj.selectBox.selectedIndex = selectedIndex;
249   return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
250  }
251  var selectBox = window.document.createElement("div");
252  selectBox.className = "selectBox";
253  selectBox.style.height = 0;
254  selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight;
255  selectBox.style.left = window.event.clientX - window.event.offsetX ;
256  selectBox.show  = showBox;
257  selectBox.selectedIndex = selectedIndex;
258  selectBox.onclick = function(){
259   var selectedObj = window.event.srcElement;
260   if( "nobr" == selectedObj.tagName.toLowerCase()  &&  selectBox.contains(selectedObj))
261   {
262    if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;
263   }
264  }
265  selectBox.onlosecapture = alert
266  var iString = "";
267  for(var i=starNum;i<=endNum;i++){
268   iString += "<nobr  onmouseover=\"this.parentNode.getElementsByTagName('nobr')[this.parentNode.selectedIndex].style.cssText='';this.style.cssText='background-color:#00006C;color:#fff;'\"  onmouseout=this.style.cssText=''>"+i+"</nobr><br>" 
269  }
270  selectBox.insertAdjacentHTML ("afterBegin",iString);
271  window.document.body.appendChild(selectBox);
272  obj.selectBox = selectBox;
273  obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
274  
275 }
276 function showBox(iHeight)
277 {
278  var box = this;
279  box.style.height =1;
280  box.style.display = "block";
281  window.clearInterval(box.timeHandle);
282  box.timeHandle = window.setInterval(interValHandle,1);
283  var s = 0,t =1 ;
284  function interValHandle()
285  {
286   box.scrollTop=1000000;
287   s = s + t*t;
288   t += 0.5;
289   box.style.height = parseInt(box.style.height) + Math.floor(s);
290   box.style.width = 65 / iHeight * box.offsetHeight;
291   if( box.offsetHeight > iHeight )
292   {
293     window.clearInterval(box.timeHandle);
294     box.style.height = iHeight;
295     box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;
296     box.getElementsByTagName("nobr")[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';
297     window.document.attachEvent("onclick",
298        box.hide=function()
299        {
300         box.style.display = "none";
301         window.document.detachEvent("onclick",box.hide)
302        }
303     );
304   }
305  }
306 }
307 </script>
308 <script language="javascript">
309 function buttonOver(){
310  var obj = window.event.srcElement;
311  if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
312  {
313   obj.runtimeStyle.cssText="border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 ";
314  }
315  if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
316  {
317   obj.style.backgroundColor = "#fff";
318  }
319 }
320 function buttonOut(){
321  var obj = window.event.srcElement;
322  if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
323  {
324   obj.runtimeStyle.cssText = "";
325  }
326  if(obj.tagName.toLowerCase() == "span"   &&   obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
327  {
328   window.setTimeout(function(){obj.style.backgroundColor = ""; },300);
329  }
330 }
331 function buttonDown(){
332  var obj = window.event.srcElement;
333  if(obj.tagName.toLowerCase() == "span"   &&   obj.className.replace(/controlButton/ig,"star") == "star" )
334  {
335   obj.setCapture();
336   obj.runtimeStyle.borderColor="#808080 #fefefe #fefefe #808080";
337  }
338 }
339 function buttonUp(){
340  var obj = window.event.srcElement;
341  if(obj.tagName.toLowerCase() == "span"   &&  obj.className.replace(/controlButton/ig,"star") == "star" )
342  {
343   obj.releaseCapture();
344   obj.runtimeStyle.cssText ="";
345  }
346 }
347 function doCmd(){
348  var obj = window.event.srcElement;
349  if(obj.tagName.toLowerCase() == "span"   &&  obj.className.replace(/controlButton/ig,"star") == "star" )
350  {
351    switch(obj.getAttribute("cmd"))
352    {
353     case "py":
354      window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year-1,window.theCalendar.month);
355      window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year-1,window.theCalendar.month);
356      break;
357     case "pm":
358      window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month-1);
359      window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month-1);
360      break;
361     case "nm":
362      window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year,window.theCalendar.month+1);
363      window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month+1);
364      break;
365     case "ny":
366      window.document.all.titleYear.innerHTML=window.TranYearMonthTitle(window.theCalendar.year+1,window.theCalendar.month);
367      window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year+1,window.theCalendar.month);
368      break;
369    }
370    window.document.all.calendarBox.show();
371    window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
372    window.currentActiveItem = window.document.getElementById(currentSelectDate);
373    if( window.currentActiveItem )window.currentActiveItem.runtimeStyle.cssText = "background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
374  }
375 }
376 function show()
377 {
378  var box = this;
379  window.clearTimeout(box.timeHandle);
380  var CdateBoxs = this.getElementsByTagName("span");
381  for(var i=0;i<CdateBoxs.length;i++)
382  {
383   CdateBoxs[i].defaultValue = new Number( CdateBoxs[i].innerHTML );
384   CdateBoxs[i].innerHTML = 0;
385  }
386  showDate();
387  function showDate(){
388   for(var i=0;i<CdateBoxs.length;i++){
389    if( new Number( CdateBoxs[i].innerHTML ) + 1 <= new Number( CdateBoxs[i].defaultValue ) )
390     CdateBoxs[i].innerHTML = new Number( CdateBoxs[i].innerHTML ) + 1 
391   }
392   box.timeHandle = window.setTimeout(showDate,1);
393  }
394 this.show = show1
395 }
396 function show1()
397 {
398  var box = this;
399  window.clearTimeout(box.timeHandle);
400  var CdateBoxs = this.getElementsByTagName("span");
401  for(var i=0;i<CdateBoxs.length;i++)CdateBoxs[i].style.display = "none";
402  showDate(CdateBoxs[0]);
403  function showDate(obj){
404   if( !obj )return;
405   obj.style.display = "inline";
406   box.timeHandle = window.setTimeout(function(){showDate(obj.nextSibling);},1);
407  }
408 this.show = show
409 }
410 /*
411 function show()
412 {
413 }
414 */
415 </script>
416 </head>
417 <body onselectstart="return false">
418     <div style="margin: 0 0 0 0;">
419         <div id="controlBar">
420             <span class="controlButton" cmd="py" title="上一年">33</span> <span
421                 class="controlButton" cmd="pm" title="上一月">3</span> <span
422                 id="titleYear"></span> <span class="controlButton" cmd="nm"
423                 title="下一月">4</span><span class="controlButton" cmd="ny" title="下一年">44</span>
424         </div>
425         <div id="weekNameBox"></div>
426         <div id="calendarBox"></div>
427     </div>
428 </body>
429 </html>

 

 

 

posted @ 2013-09-13 15:08  最是那一杯红酒  阅读(320)  评论(0)  编辑  收藏  举报