JS实现日历

最新推荐文章于 2023-09-21 13:13:29 发布

置顶 68rui

最新推荐文章于 2023-09-21 13:13:29 发布

阅读量1.5w

点赞数 16

分类专栏： HTML JS 文章标签： HTML JS

本文链接：https://blog.csdn.net/qq_41134769/article/details/84988949

版权

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

JS 实现日历

最近在学JS，分享一些使用js实现的网页，后续还会更一些关于js的例子，话不多说，直接附上源码，源码上有注释。

js 实现日历主要运用Date函数,这里就不在多讲Date的用法，因为并不是很难，所以想要了解的朋友可以去网上自行搜索，有很多的讲解！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Js日历</title>
<style type="text/css">
 .evrday{
	    width:14%;     
		 float:left;
		 }
  #calendar{
	  width:400px;
	  margin:auto;
  }
 button{
	 width:25%;
	 height:40px;
	 float:left;
 }
 div{
	 margin-top:10px;
	 margin-bottom:5px;
	 text-align:center;
 }
#month{
width:50%;
float:left;
}

 
</style>
</head>
<body onLoad="showday()">
 <div id="calendar">
    <div>
       <button onClick="shang()">上个月</button>
         <div id="month"></div>
       <button onClick="next()" id="nav">下个月</button>
    </div>
    <div>
       <div class="evrday">日</div>
       <div class="evrday">一</div>
       <div class="evrday">二</div>
       <div class="evrday">三</div>
       <div class="evrday">四</div>
       <div class="evrday">五</div>
       <div class="evrday">六</div>
    </div>
    
    <div id="day" style="color:#0FF"></div>
 </div>
 <script>
      var today=new Date();//获取当前时间
	  var year=today.getFullYear();//获取当前的年份
	  var month=today.getMonth()+1;//获取当前月
	  var day=today.getDate();//获取当前月
	  var allday=0;
	  function showmonth(){
		  var year_month=year+"年"+month+"月";
		  document.getElementById("month").innerHTML=year_month;//显示当前的年月日
	  }
	
	  function count(){
		  if(month!=2)
		  {
		  if(month==4||month==6||month==9||month==11)//判断是否是相同天数的几个月，二月除外
		     allday=30;
			 else
			 allday=31;
		  }
		  else
		  {
			  if((year%4==0&&year%100!=0)||(year%400==0))//判断是否是闰年，进行相应的改变
			  allday=29;
			  else 
			  allday=28;}
	  }
	  //显示相应月份的天数
	  function showday(){	  
         showmonth()
		    count();
		  var fistdate=new Date(year,month-1,1);
		  var xinqi=fistdate.getDay();
		  var daterow=document.getElementById("day");
		  for(var i=0;i<xinqi;i++)//循环输出天数
		  {
			  var dayElement=document.createElement("div");
			    dayElement.className="evrday";
			 daterow.appendChild(dayElement);
		  }
		  
		  for(var j=1;j<=allday;j++)
		  {	
			  var dayElement=document.createElement("div");
			   dayElement.innerHTML=j;
			    dayElement.className="evrday";
				if(j==day)//当前日，标红
				 dayElement.style.color="red";
				daterow.appendChild(dayElement);
		  }
	  }
	   //点击下个月
	    function next(){
           document.getElementById('day').innerHTML ="";
          if(month<12)
		    {  month=month+1;
		    }
		      else
		       {  month=1;
		         year=year+1; 
		     }
		        document.getElementById('div').innerHTML =showday();    
		}
        //点击上个月
		function shang(){
           document.getElementById('day').innerHTML ="";
          if(month>1)
		      {month=month-1;
		      }
		      else
		      {
		         month=12;
		         year=year-1; 
		     }
		        document.getElementById('div').innerHTML =showday();    
		}

	 
	  </script>
</body>
</html>

下面是运行的示例图：
在这里插入图片描述