本文實例為大家分享了js實現一個簡單的日歷控件，供大家參考，具體內容如下
效果圖：
具體代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none; outline:none;} body a{outline:none;blr:expression(this.onFocus=this.blur());} img{ border:none;} ul{ list-style:none;} body{ color:#666666; font-size:14px; font-family:"微軟雅黑"; background-color:#fff; height:100%; overflow-y:scroll;*overflow-y:inherit;} /*html{ height:100%;}*/ .clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;} .clearfix{ zoom:1;} #box{width:350px; position:absolute;} #title{width:350px; height:50px;} #month{ float:left;width:60px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #year{float:left;width:80px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #week{ width:350px;height:50px;} #week div{ float:left; width:48px; height:48px; margin:1px; background:#C90; color:#fff; text-align:center; line-height:48px; cursor:pointer;} #con{ width:350px;} #con div{ float:left; width:48px; height:48px; margin:1px; background:#CCC; color:#333; text-align:center; line-height:48px; cursor:pointer;} #con .edate{background:#999;} #con .edate:hover{background:#09F; color:#fff;} #con div.now{background:#09F; color:#fff;} #prevmonth,#nextmonth,#prevyear,#nextyear{float:left;width:50px; height:50px;text-align:center;cursor:pointer;line-height:50px;} #btns{width:350px; height:40px;} #nowtime{ float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;} #nowtime:hover{background:#ddd;} #cleartime{float:left; margin:5px; height:30px; line-height:30px; padding:0 5px; background:#09F; cursor:pointer; border-radius:5px;} </style></head><body> <p style=" margin:100px;">選擇日期：<input type="text" id="date" value="" style="height:40px; line-height:40px;"/></p> </body><script type="text/javascript">window.onload=function(){ //創建日歷控件基本結構 var obody=document.body; createbox(); function createbox(){ var ddbox=document.createElement("div"); ddbox.id="box"; ddbox.style.display="none"; var str=""; str+='<div id="title"><div id="prevyear"><<</div><div id="prevmonth"><</div><div id="month"></div><div id="year"></div><div id="nextmonth">></div><div id="nextyear">>></div></div>'; str+='<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>'; str+='<div id="con" class="clearfix"></div>'; str+='<div id="btns"><div id="nowtime">當前時間</div><div id="cleartime">清空</div></div>'; ddbox.innerHTML=str; obody.appendChild(ddbox); }; //===================get ele=============================== var omonth=document.getElementById("month"); var oyear=document.getElementById("year"); var con=document.getElementById("con"); var prevmonth=document.getElementById("prevmonth"); var nextmonth=document.getElementById("nextmonth"); var prevyear=document.getElementById("prevyear"); var nextyear=document.getElementById("nextyear"); var nowtime=document.getElementById("nowtime"); var date=document.getElementById("date"); var box=document.getElementById("box"); var cleartime=document.getElementById("cleartime"); //===================show date=============================== date.onfocus=function(){//顯示控件 var datel=this.getBoundingClientRect().left; var datet=this.getBoundingClientRect().top+40; box.style.left=datel+"px"; box.style.top=datet+"px"; box.style.display="block"; }; con.onclick=function(event){ if(event.target.tagName=="DIV" && event.target.nodeType=="1" && hasclass(event.target.className,"edate")){ date.value=""; date.value=dateObj.getFullYear()+"-"+toyear(dateObj)+"-"+event.target.innerHTML; box.style.display="none"; }; }; cleartime.onclick=function(event){ date.value=""; }; //===================set year month=============================== //默認時間對象 var dateObj = new Date(); //動態控制 prevmonth.onclick=function(){//上一月 var ddm=null; var ddy=null; if((dateObj.getMonth()-1)==-1){ ddm=11; ddy=dateObj.getFullYear()-1; }else{ ddm=dateObj.getMonth()-1; ddy=dateObj.getFullYear(); }; dateObj.setFullYear(ddy); dateObj.setMonth(ddm); omonth.innerHTML=toyear(dateObj)+"月"; oyear.innerHTML=dateObj.getFullYear()+"年"; remove(); oneweek=oneyearoneday(dateObj); alld=alldays(dateObj); nowd=nowday(dateObj); init(oneweek,alld,nowd); }; nextmonth.onclick=function(){//下一月 var ddm=null; var ddy=null; if((dateObj.getMonth()+1)==12){ ddm=0; ddy=dateObj.getFullYear()+1; }else{ ddm=dateObj.getMonth()+1; ddy=dateObj.getFullYear(); }; dateObj.setFullYear(ddy); dateObj.setMonth(ddm); omonth.innerHTML=toyear(dateObj)+"月"; oyear.innerHTML=dateObj.getFullYear()+"年"; remove(); oneweek=oneyearoneday(dateObj); alld=alldays(dateObj); nowd=nowday(dateObj); init(oneweek,alld,nowd); }; prevyear.onclick=function(){//上一年 var ddy=dateObj.getFullYear()-1; dateObj.setFullYear(ddy); oyear.innerHTML=dateObj.getFullYear()+"年"; remove(); oneweek=oneyearoneday(dateObj); alld=alldays(dateObj); nowd=nowday(dateObj); init(oneweek,alld,nowd); }; nextyear.onclick=function(){//下一年 var ddy=dateObj.getFullYear()+1; dateObj.setFullYear(ddy); oyear.innerHTML=dateObj.getFullYear()+"年"; remove(); oneweek=oneyearoneday(dateObj); alld=alldays(dateObj); nowd=nowday(dateObj); init(oneweek,alld,nowd); }; //返回到今時今日 nowtime.onclick=function(){ var dddate=new Date(); var ddm=dddate.getMonth(); var ddy=dddate.getFullYear(); dateObj.setFullYear(ddy); dateObj.setMonth(ddm); omonth.innerHTML=toyear(dateObj)+"月"; oyear.innerHTML=dateObj.getFullYear()+"年"; remove(); oneweek=oneyearoneday(dateObj); alld=alldays(dateObj); nowd=nowday(dateObj); init(oneweek,alld,nowd); }; //年月獲取 var year=dateObj.getFullYear(); var month=toyear(dateObj);//0是12月 //月年的顯示 omonth.innerHTML=month+"月"; oyear.innerHTML=year+"年"; //===================set day=============================== //獲取本月1號的周值 var oneweek=oneyearoneday(dateObj); //本月總日數 var alld=alldays(dateObj); //當前是幾 var nowd=nowday(dateObj); //初始化顯示本月信息 init(oneweek,alld,nowd); //===================function=============================== //有無指定類名的判斷 function hasclass(str,cla){ var i=str.search(cla); if(i==-1){ return false; }else{ return true; }; }; //初始化日期顯示方法 function remove(){ con.innerHTML=""; }; function init(oneweek,alld,nowd){ for(var i=1;i<=oneweek;i++){//留空 var eday=document.createElement("div"); eday.innerHTML=""; con.appendChild(eday); }; for(var i=1;i<=alld;i++){//正常區域 var eday=document.createElement("div"); if(i==nowd){ eday.innerHTML=i; eday.className="now edate"; con.appendChild(eday); }else{ eday.innerHTML=i; eday.className="edate"; con.appendChild(eday); }; }; }; //獲取本月1號的周值 function oneyearoneday(dateObj){ var oneyear = new Date(); var year=dateObj.getFullYear(); var month=dateObj.getMonth();//0是12月 oneyear.setFullYear(year); oneyear.setMonth(month);//0是12月 oneyear.setDate(1); return oneyear.getDay(); }; //當前是幾 function nowday(dateObj){ return dateObj.getDate(); }; //獲取本月總日數方法 function alldays(dateObj){ var year=dateObj.getFullYear(); var month=dateObj.getMonth(); if(isLeapYear(year)){//閏年 switch(month) { case 0: return "31"; break; case 1: return "29"; break; //2月 case 2: return "31"; break; case 3: return "30"; break; case 4: return "31"; break; case 5: return "30"; break; case 6: return "31"; break; case 7: return "31"; break; case 8: return "30"; break; case 9: return "31"; break; case 10: return "30"; break; case 11: return "31"; break; default: }; }else{//平年 switch(month) { case 0: return "31"; break; case 1: return "28"; break; //2月 case 2: return "31"; break; case 3: return "30"; break; case 4: return "31"; break; case 5: return "30"; break; case 6: return "31"; break; case 7: return "31"; break; case 8: return "30"; break; case 9: return "31"; break; case 10: return "30"; break; case 11: return "31"; break; default: }; }; }; //閏年判斷函數 function isLeapYear(year){ if( (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){ return true; }else{ return false; }; }; //月份轉化方法 function toyear(dateObj){ var month=dateObj.getMonth() switch(month) { case 0: return "1"; break; case 1: return "2"; break; case 2: return "3"; break; case 3: return "4"; break; case 4: return "5"; break; case 5: return "6"; break; case 6: return "7"; break; case 7: return "8"; break; case 8: return "9"; break; case 9: return "10"; break; case 10: return "11"; break; case 11: return "12"; break; default: }; };};</script></html>希望本文所述對大家學習javascript程序設計有所幫助。
新聞熱點
疑難解答
