原生js日历

最新推荐文章于 2022-10-10 19:31:31 发布

大喊大叫：）

最新推荐文章于 2022-10-10 19:31:31 发布

阅读量157

点赞数

分类专栏： js实践笔记 js日历文章标签： javascript css

本文链接：https://blog.csdn.net/d3ye87yr41kjrdn/article/details/107570838

版权

笔记同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

js实践

3 篇文章 0 订阅

订阅专栏

js日历

1 篇文章 0 订阅

订阅专栏

代码都有注释，请指正
主要是对Date（）构造函数构造出来的时间对象的属性和方法等的熟悉掌握

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>日历制作</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		.c4{
			color: #f40;
		}
		.fc:after{
			content: '';
			/*overflow: hidden;*/
			clear: both;
			/*overflow-wrap: all;*/
			display: block;
		}
		#wrap{
			margin: 100px auto;
			width: 300px;
			border:1px solid black;
		}
		#wrap .nav{
			height: 50px;
			border-bottom: 1px solid black;
		}
		#wrap .nav span{
			display: block;
			float: left;
			width: 100px;
			text-align: center;
			line-height: 50px;
		}
		#wrap .nav span button{
			background:none;
			outline: none;
			border:none;
		}
		#wrap .month{
			text-align: center;
			line-height: 30px;
			border-bottom: 1px solid black;
		}
		#wrap .week{
			/*float: left;*/
			background-color: #ccc;
			/*height: 30px;*/
		}
		#wrap .date{
			box-sizing: border-box;
		}
		#wrap .week li{
			float: left;
			text-align: center;
			line-height: 40px;
			width: 40px;
			padding-left: 2px;
		}
		#wrap .date li{
			width: 30px;
			line-height: 30px;
			float: left;
			text-align: center;
			/*border:1px solid black;*/
			border-radius: 50%;
			margin: 5px 5px 5px 7px;
		}
		#wrap .date li:hover,
		#wrap .date li.active{
			border-color: #f40;
			background-color: #f40;
			color: #fff;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="nav">
			<span class="prevMon"><button>上个月</button></span>
			<span class="year c4">2022</span>
			<span class="nextMon"><button>下个月</button></span>
		</div>
		<p class="month c4">2月</p>
		<ul class="week fc">
			<li>日</li>
			<li>一</li>
			<li>二</li>
			<li>三</li>
			<li>四</li>
			<li>五</li>
			<li>六</li>
		</ul>
		<ul class="date fc">
			<!-- <li class = 'active'>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li> -->
		</ul>
	</div>

	<script type="text/javascript">

		var arr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
		var date = new Date();
		var flag = true;

		function upDate(){
			var nowYear = date.getFullYear(),
				nowMonth = date.getMonth(),
				nowDay = date.getDate();
			//为具体的时间——现在加锁
			if(resYear === nowYear && resMonth === nowMonth){
				flag = true;
			}
			// console.log(nowYear,nowMonth);
			var weekday = new Date(nowYear,nowMonth,1).getDay(),//获取周几
				//通过获取最后一天的日期来知道该月有多少天
				days = new Date(nowYear,nowMonth,-1).getDate()+1;

			// console.log(weekday,days);
			document.getElementsByClassName('year')[0].innerHTML = nowYear;

			//date.getMOnth()得到的是0-11，刚好arr数组里也是0-11
			document.getElementsByClassName('month')[0].innerHTML = arr[nowMonth];

			var html = '';
			for(var i = 0;i < weekday;i++){
				html += '<li></li>';
			}
			for(var i = 1;i <= days;i++){
				if(flag && i === nowDay){
					html += '<li class = \'active\'>'+ i +'</li>';
				}
				else{
					html += '<li>'+ i +'</li>';
				}
			}

			document.getElementsByClassName('date')[0].innerHTML = html;
		}
		//得到当前具体时间
		upDate();
		//存储具体日期
		var resYear = date.getFullYear(),resMonth = date.getMonth();
		
		//点击按钮更换月份、年份，调用update()函数
		document.getElementsByClassName('prevMon')[0].onclick = function(){
			date.setMonth(date.getMonth()-1);
			flag = false;
			upDate();
		}
		document.getElementsByClassName('nextMon')[0].onclick = function(){
			date.setMonth(date.getMonth()+1);
			flag = false;
			upDate();
		}
	</script>
</body>
</html>