JavaScript日历_data.gettime()-CSDN博客

本文链接：https://blog.csdn.net/FreMePst/article/details/83000246

Data

var my_date = new Date();

方法描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数

JavaScript Date 对象

语法：var myDate = new Date()
getDate(); 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay(); 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth(); 从 Date 对象返回月份 (0 ~ 11)。
getFullYear(); 从 Date 对象以四位数字返回年份。

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>my_calender</title>

<meta name="description" c1ontent="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    	<div class = "calendar">
    		<div class = "title green ">
    			<h1 id="calendar-title">Month</h1>
    			<h2 id = "calendar-year">Year</h2>
    			<a href="" id = "pre"></a>
    			<a href="" id = "next"></a>
    		</div>
    		<div class = "body">
    			<div class ="body-list purpleblue ">
    				<ul>
    					<li>MON</li>
    					<li>TUE</li>
    					<li>WED</li>
    					<li>THU</li>
    					<li>FRI</li>
    					<li>SAT</li>
    					<li>SUN</li>
    				</ul>
    			</div>
    			<div class="body-list">
    				<ul id = "days">
    				</ul>
    			</div>
    	</div>
    	<script type="text/javascript" src="calendar.js"></script>
</body>
</html>

css

*{/*通配符设置全局box位置，权重为0，随时更改*/
	margin: 0;
	padding: 0;
}
body{
	background: #f2f2f2;

}
 .calendar{
 	margin: 45px auto;/*居中显示*/
	width: 450px;
 	height: 350px;
 	background: #fff;
 	box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.3);
 }
 .title{
 	height: 70px;
 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 	text-align:center;/*文本对齐方式 left right center*/
	position: relative;
 }
 .body-list ul{
	width: 100%;
	font-size: 14px;
	font-weight: bold;
 }
 .body-list ul li{
 	width: 14.28%;
 	height: 36px;
 	line-height: 36px;
 	float:left;	/*设置横向显示*/
 	list-style-type:none;/* 去除ul的点*/
 }
.purpleblue{
	color: #3399FF;
}
.green{
	color:#6ac13c;
}

JavaScript

!function(){
	console.log("code start");
	var ex_month = [31,29,31,30,31,30,31,31,30,31,30,31];
	var no_month	= [31,28,31,30,31,30,31,31,30,31,30,31]
	var month_name = ["January","Febrary","March","April","May","June","July","Auguest","September",
	"October","November","December"];
	var str = "";
	var cmonth = document.getElementById("calendar-title");
	var cyear = document.getElementById("calendar-year");
	var day = document.getElementById('days');
	var pre = document.getElementById('pre');
	var next = document.getElementById('next');

	var my_date = new Date();
	var my_year = my_date.getFullYear();
	var my_month = my_date.getMonth();

	function display(){
		var str = "";
		var startDay = dayStart(my_year,my_month);
		var total = judge(my_year);
		for(var i = 1;i<startDay;i++){
			str += "<li class = 'gray'>" +"</li>"
				
		}
		for(var i=1 ;i<=total;i++){
			str += "<li>" +i+"</li>"
				
		}
		day.innerHTML = str;
		cmonth.innerHTML = month_name[my_month];
	    cyear.innerHTML = my_year; 
	}
	pre.onclick = function(e){
		e.preventDefault();
		my_month--;
		if (my_month<0) {
			my_year--;
			my_month = 11;
		}

		display();
		
	}
	next.onclick =function(e){
		e.preventDefault();
		my_month++
		if(my_month>11){
			my_year++;
			my_month = 0;
		}

		display();
	}
	function dayStart(year,month){
		var tempdate = new Date(year,month,1)
		return (tempdate.getDay());
	}
	function judge(year){
	var temp = year%4;
	return(temp == 0 ? ex_month[my_month] :no_month[my_month]);
	}
	display();
}()