简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Sharing examples of making calendar controls using native js

Sharing examples of making calendar controls using native js

高洛峰
高洛峰Original
2017-02-06 10:33:361250browse

The example of this article shares with you a simple calendar control implemented in js for your reference. The specific content is as follows

Rendering:

Sharing examples of making calendar controls using native js

Specific code : 

<!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+=&#39;<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>&#39;;
  str+=&#39;<div id="week"><div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div></div>&#39;;
  str+=&#39;<div id="con" class="clearfix"></div>&#39;;
  str+=&#39;<div id="btns"><div id="nowtime">当前时间</div><div id="cleartime">清空</div></div>&#39;;
  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>

I hope this article will be helpful to everyone learning javascript programming.

For more native js calendar control examples and related articles, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Lightweight native js calendar plug-in calendar.js usage guideNext article：Lightweight native js calendar plug-in calendar.js usage guide

Related articles

See more