JS实现日历

最新推荐文章于 2024-05-17 14:54:19 发布
置顶 最新推荐文章于 2024-05-17 14:54:19 发布
阅读量1.5w 收藏 104
点赞数 16
分类专栏： HTML JS 文章标签： HTML JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>

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

68rui
关注
  • 16
    点赞
  • 踩
  • 104
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
使用js创建一个简单的日历
id_1012的博客
02-28 342
使用html+js实现的一个日历组件,一起来学习吧!
日历组件封装 —— (Vue 和 JS两种方式实现)
dabaooooq的博客
02-14 1418
分三个模块，日期面板、年份面板、月份面板。所有事件，利用事件代理方式，只绑定根元素点击事件，最后触发子节点通过冒泡触发事件。公共store，用于响应数据的变化，及时去创建或更新面板。
使用js实现一个日历
最新发布
eren_yeger的博客
05-17 173
首先在html里面写一个div。下面是js部分的代码。
分享88个时间日期JS特效，总有一款适合您
zdh13370188237的博客
02-12 979
酒店住房日期选择插件jQuery Date Range Picker。知识付费甚欢喜，为咱码农谋福利。自适应倒计时插件jquery.lwtCountdown.js。兼容IE6的时间范围选择插件dateRange.js。基于jQuery的时间处理插件timeago.js。时间轴插件jquery.eventFlow.js。时间插件jquery-timepicker.js。日期时间插件jQuery Timepicker。双日历选择插件double-date.js。日期日历插件ion.calendar.js。
实现博客园的日历效果的原生js插件
weixin_34409741的博客
01-22 102
　　这个原生代码的js日历插件是根据我前面的那个生成日历效果的函数改造而成的，原本以为利用我前面那个日历函数可以很容易就实现博客园一样效果的日历插件，但事实上还是费了一般的功夫才实现这个博客园效果的日历插件，个中遇到的问题就不一一叙述了，只讲两点。 　　我本以为这个时间插件的点击事件是比较容易实现的，但，动手时才发现，点击事件并不好绑定，刚开始，我是把日历全部都放在一个table里面。我以为这...
js实现日历
sun~的博客
11-30 923
需求 默认展示当前月份，点击箭头切换上月下月，并展示每天的上课时间。（日历由时间戳计算，后端不返回555~） 实现代码 html <el-dialog :visible.sync="editVisible" width="800px" title="上课时间" custom-class="container"> <div class="wrap"> <div class="topTime"> <sp...
原生js实现日历效果
11-21
本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
JavaScript实现简单日历效果
10-14
主要为大家详细介绍了JavaScript实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现日历效果
12-09
本文实例为大家分享了js实现日历效果的具体代码，供大家参考，具体内容如下 <!doctype html> <html> <head> <meta charset="gb2312"> <title>万年历</title> [removed] var ...
js制作日历
Wayne_SvuJ的博客
01-21 3246
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
用JS写的日历 很好用的日历
06-07
用JS写的日历,日历,日历控件,可以在html中使用。很漂亮
纯JS实现简单的日历
10-19
主要为大家详细介绍了纯JS实现简单日历的的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js日历控件实现及日程安排
08-07
js写的日历显示的控件，显示本月日历，及上一月下一月日历查看，可以扩展实现当月日程安排、
一个js写的日历控件
07-01
为了酒店选择入住日期和离店日期写的一个控件
JS写一个简单日历
weixin_30858241的博客
01-25 361
JS写一个日历，配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
用JS写一个日历
shmilyhe的专栏
11-14 2465
之前百度上有人问怎么用JS写日历，分数挺高的，临时写了一个因为写得仓促，功能都没有完善，今天有空整理了一下，包装成了一个Calendar类，可惜时间做美工，先贴出来吧<!--/**@author eric shmilyhe@163.com*blog.csdn.net/shmilyhe*/var Calendar={_today:new D
js日历日期计算核心代码
qq_24882601的博客
06-28 554
js日历算法
前端开发_JavaScript_常用对象之Date对象实践日历
u013185175的博客
01-03 418
Date对象实践万年历 1.引入 我们上一节课我们讲解了有关日期的Date()对象，现在我们写一个该对象的使用:日历。 2.实现思路 3.代码实现
html+js实现日历
11-08
HTML和JS可以很方便地实现一个简单的日历。以下是一个基本的示例： HTML部分： ``` <div id="calendar"></div> ``` JS部分： ``` // 获取当前日期 var currentDate = new Date(); // 获取年份和月份 var currentYear = currentDate.getFullYear(); var currentMonth = currentDate.getMonth(); // 显示日历 showCalendar(currentYear, currentMonth); // 上个月按钮点击事件 document.getElementById("prevMonth").addEventListener("click", function() { currentMonth--; if (currentMonth < 0) { currentYear--; currentMonth = 11; } showCalendar(currentYear, currentMonth); }); // 下个月按钮点击事件 document.getElementById("nextMonth").addEventListener("click", function() { currentMonth++; if (currentMonth > 11) { currentYear++; currentMonth = 0; } showCalendar(currentYear, currentMonth); }); // 日历显示函数 function showCalendar(year, month) { var calendarElement = document.getElementById("calendar"); var calendarHTML = ""; // 生成标题 calendarHTML += "<h2>" + year + "年" + (month + 1) + "月</h2>"; // 生成上个月按钮 calendarHTML += "<button id='prevMonth'>上个月</button>"; // 生成下个月按钮 calendarHTML += "<button id='nextMonth'>下个月</button>"; // 生成表格 calendarHTML += "<table>"; // 生成表头 calendarHTML += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"; // 获取当月第一天和最后一天的日期对象 var firstDay = new Date(year, month, 1); var lastDay = new Date(year, month + 1, 0); // 获取当月第一天是星期几 var firstDayOfWeek = firstDay.getDay(); // 获取当月总共有多少天 var totalDays = lastDay.getDate(); // 生成日期表格 var date = 1; for (var i = 0; i < 6; i++) { calendarHTML += "<tr>"; for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDayOfWeek) { // 空白格 calendarHTML += "<td></td>"; } else if (date > totalDays) { // 空白格 calendarHTML += "<td></td>"; } else { // 日期格 calendarHTML += "<td>" + date + "</td>"; date++; } } calendarHTML += "</tr>"; if (date > totalDays) { break; } } calendarHTML += "</table>"; // 将生成的日历HTML添加到页面中 calendarElement.innerHTML = calendarHTML; } ``` 这个JS函数可以根据指定的年份和月份生成对应的日历表格，并且提供了上一个月和下一个月切换的功能。在HTML中，我们只需要一个`<div>`元素来显示日历。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值