简单的日历实现

最新推荐文章于 2022-09-13 09:23:20 发布

Wrj6811

最新推荐文章于 2022-09-13 09:23:20 发布

阅读量228

点赞数

分类专栏：前端小功能

本文链接：https://blog.csdn.net/Wrj6811/article/details/103163686

版权

前端小功能专栏收录该内容

22 篇文章 1 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单日历实现</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<script src="index.js"></script>
	</head>
	<body onload="showDate()">
		<h3 class="center_h3">简单日历的设计与实现</h3>
		<hr >
		<div id="calendar">
			<!-- 状态栏 -->
			<div class="flo">
				<button onclick="lastMonth()">上个月</button>
				<div id="month"></div>
				<button onclick="nextMonth()">下个月</button>
			</div>
			<!-- 显示星期几 -->
			<div>
				<div class="everyday">日</div>
				<div class="everyday">一</div>
				<div class="everyday">二</div>
				<div class="everyday">三</div>
				<div class="everyday">四</div>
				<div class="everyday">五</div>
				<div class="everyday">六</div>
			</div>
			<!-- 显示当前月份每天的日期 -->
			<div id="day"></div>
		</div>
	</body>
</html>

css文件

div{
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.center_h3{
	text-align: center;
}
#calendar{
	width: 400px;
	margin: auto;
}
button{
	width: 25%;
	float: left;
	height: 40px;
}
#month{
	width: 50%;
	float: left;
}
.flo{
	overflow: hidden;
}
.everyday{
	width: 14%;
	float: left;
}

js文件

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var allday = 0;
// 用于推算当前月份一共多少天
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 showMonth(){
	var year_month = year+"年"+month+"月"
	document.getElementById("month").innerHTML = year_month
}
// 显示当前月份的日历
function showDate(){
	showMonth();
	count();
	var firstdate = new Date(year,month-1,1);
	var xiqi = firstdate.getDay();
	var daterow = document.getElementById("day")
	daterow.innerHTML = ""
	if(xiqi != 0) {
		for(var i = 0; i<xiqi;i++) {
			var dayElement = document.createElement("div")
			dayElement.className = "everyday"
			daterow.appendChild(dayElement)
		}
	}
	for(var j=1;j<=allday;j++){
		var dayElement = document.createElement("div")
		dayElement.className = "everyday"
		dayElement.innerHTML = j+""
		if(j==day){
			dayElement.style.color = "red"
		}
		daterow.appendChild(dayElement)
	}
}
// 显示上个月的日历
function lastMonth(){
	if(month>1){
		month-=1;
	}else{
		month=12;
		year-=1;
	}
	showDate()
}
// 显示下个月的日历
function nextMonth(){
	if(month<12){
		month+=1;
	}else{
		month =1;
		year+=1
	}
	showDate()
}

Wrj6811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的日历实现

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简单日历实现</title> <link rel="stylesheet" type="text/css" href="index.css"/> &lt...
复制链接

扫一扫