原生js制作日历控件实例分享

2019-11-20 10:17:17

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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程序设计有所帮助。

上一篇：基于javascript bootstrap实现生日日期联动选择

下一篇：基于HTML模板和JSON数据的JavaScript交互(移动端)