文件夹下的html 统一管理

2024-12-04 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>文件管理</title></head><body><scripttype="text/javascript">var$=function(id){return"string"==typeofid?document.getElementById(id):id;};varClass={create:function(){returnfunction(){this.initialize.apply(this,arguments);}}}Object.extend=function(destination,source){for(varpropertyinsource){destination[property]=source[property];}returndestination;}varCalendar=Class.create();Calendar.prototype={initialize:function(container,options){this.Container=$(container);//容器(table结构)this.Days=[];//日期对象列表this.SetOptions(options);this.Year=this.options.Year;this.Month=this.options.Month;this.SelectDay=this.options.SelectDay?newDate(this.options.SelectDay):null;this.onSelectDay=this.options.onSelectDay;this.onToday=this.options.onToday;this.onFinish=this.options.onFinish;this.Draw();},//设置默认属性SetOptions:function(options){this.options={//默认值Year:newDate().getFullYear(),//显示年Month:newDate().getMonth()+1,//显示月SelectDay:null,//选择日期onSelectDay:function(){},//在选择日期触发onToday:function(){},//在当天日期触发onFinish:function(){}//日历画完后触发};Object.extend(this.options,options||{});},//上一个月PreMonth:function(){//先取得上一个月的日期对象vard=newDate(this.Year,this.Month-2,1);//再设置属性this.Year=d.getFullYear();this.Month=d.getMonth()+1;//重新画日历this.Draw();},//下一个月NextMonth:function(){vard=newDate(this.Year,this.Month,1);this.Year=d.getFullYear();this.Month=d.getMonth()+1;this.Draw();},//画日历Draw:function(){//用来保存日期列表vararr=[];//用当月第一天在一周中的日期值作为当月离第一天的天数for(vari=1,firstDay=newDate(this.Year,this.Month-1,1).getDay();i<=firstDay;i++){arr.push(" ");}//用当月最后一天在一个月中的日期值作为当月的天数for(vari=1,monthDay=newDate(this.Year,this.Month,0).getDate();i<=monthDay;i++){arr.push(i);}varfrag=document.createDocumentFragment();this.Days=[];while(arr.length>0){//每个星期插入一个trvarrow=document.createElement("tr");//每个星期有7天for(vari=1;i<=7;i++){varcell=document.createElement("td");cell.innerHTML=" ";if(arr.length>0){vard=arr.shift();cell.innerHTML=d;if(d>0){this.Days[d]=cell;//判断是否今日if(this.IsSame(newDate(this.Year,this.Month-1,d),newDate())){this.onToday(cell);}//判断是否选择日期if(this.SelectDay&&this.IsSame(newDate(this.Year,this.Month-1,d),this.SelectDay)){this.onSelectDay(cell);}}}row.appendChild(cell);}frag.appendChild(row);}//先清空内容再插入(ie的table不能用innerHTML)while(this.Container.hasChildNodes()){this.Container.removeChild(this.Container.firstChild);}this.Container.appendChild(frag);this.onFinish();},//判断是否同一日IsSame:function(d1,d2){return(d1.getFullYear()==d2.getFullYear()&&d1.getMonth()==d2.getMonth()&&d1.getDate()==d2.getDate());}};</SCRIPT><styletype="text/css">.Calendar{font-family:Verdana;font-size:12px;background-color:#e0ecf9;text-align:center;width:200px;height:160px;padding:10px;line-height:1.5em;}.Calendara{color:#1e5494;}.Calendartable{width:100%;border:0;}.Calendartablethead{color:#acacac;}.Calendartabletd{font-size:11px;padding:1px;}#idCalendarPre{cursor:pointer;float:left;padding-right:5px;}#idCalendarNext{cursor:pointer;float:right;padding-right:5px;}#idCalendartd.onToday{font-weight:bold;color:#C60;}#idCalendartd.onSelect{font-weight:bold;}</style><divclass="Calendar"><divid="idCalendarPre"><<</div><divid="idCalendarNext">>></div><spanid="idCalendarYear">2008</span>年<spanid="idCalendarMonth">8</span>月<tablecellspacing="0"><thead><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead><tbodyid="idCalendar"></tbody></table></div><scriptlanguage="JavaScript">varcale=newCalendar("idCalendar",{SelectDay:newDate().setDate(),//10onSelectDay:function(o){o.className="onSelect";},onToday:function(o){o.className="onToday";},onFinish:function(){$("idCalendarYear").innerHTML=this.Year;$("idCalendarMonth").innerHTML=this.Month;varflag=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,20,21,22,23,24,25,26,27,28,29,30,31];for(vari=0,len=flag.length;i<len;i++){vars="<ahref="+this.Year+""+this.Month+""+flag[i]+".html>"+flag[i]+"</a>";this.Days[flag[i]].innerHTML=s;}}});$("idCalendarPre").onclick=function(){cale.PreMonth();}$("idCalendarNext").onclick=function(){cale.NextMonth();}</SCRIPT><br></body></html>

这是一个让简单日历附加一个功能的方法

演示所用的文件见附件

附件：http://down.51cto.com/data/2367886