初来乍到 原生js写日历

js日常

原生js写日历

思路 :1. 获取到每个月具体的天数
2.获取每天具体的星期值

代码实现

下面展示一些 html代码块。

<div class="out">
	<p class="ppp">
		<span id="prev">上一月</span>
		<span id="nian"></span>
		<span id="next">下一月</span>
	</p>
	<p id="yue"></p>
	<ul id="week">
	</ul>
	<ul id="date">
	</ul>
</div>

简单的大体结构 外面一层div套住

css 部分

* {
	margin: 0;
	padding: 0;
}

ul,li {
	list-style: none;
}
.out {
	width: 490px;
	margin: 0 auto;
	border: 2px solid rgb(85, 0, 255);
}

#week {
	display: flex;
	justify-content: space-around;
	height: 50px;
	line-height: 50px;
	background: #ccc;
}

.ppp {
	display: flex;
	justify-content: space-around;
}

#yue {
	text-align: center;
}

#date {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

#date li {
	width: 70px;
	height: 70px;
	line-height: 70px;
	box-sizing: border-box;
}

#prev:hover,#next:hover {
	cursor: pointer;
}

.bor {
	border: 2px pink solid;
	background: rgba(255, 149, 255, 0.2);
}
.days:hover {
	background: rgba(85, 85, 255, 0.2);
	cursor: pointer;
}

采用flex 简单完成布局

js部分

	var date = new Date();
	add();
	function add() {
		var nowyear = date.getFullYear();
		var nowday = date.getDate();
		var month = date.getMonth() + 1;
		var arr1 = ['日', '一', '二', '三', '四', '五', '六'];
		var xq = new Date(nowyear, month, 1).getDate(); // 每个月的第一天周几
		var tian = new Date(nowyear, month, -1).getDate() + 2; //每个月有几天
		document.getElementById('nian').innerHTML = nowyear;
		document.getElementById('yue').innerHTML = month + '月';
		var wek = '';
		for (var i = 0; i < arr1.length; i++) {
		wek += '<li>' + arr1[i] + '</li>';
	}
		document.getElementById("week").innerHTML = wek;
		var days = '';
		for (var i = 0; i < xq; i++) {
		days += "<li></li>";
	}
		for (var i = 1; i < tian; i++) {
			if (i == nowday) {
				days += '<li class="bor">' + i + '</li>';
			} else {
				days += '<li class="days">' + i + '</li>';
			}
		}
		document.getElementById('date').innerHTML = days;
	}
	document.getElementById('prev').onclick = function() {
		date.setMonth(date.getMonth() - 1);
		add();
	}
	document.getElementById('next').onclick = function() {
		date.setMonth(date.getMonth() + 1);
		add();
	}