原生js实现简单日历的制作

最新推荐文章于 2024-07-10 23:14:41 发布

时光丨荏苒

最新推荐文章于 2024-07-10 23:14:41 发布

阅读量1.9k

点赞数 11

分类专栏：工具文章标签：日历

本文链接：https://blog.csdn.net/weixin_43673669/article/details/87885695

版权

工具专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码块

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script>
/*
var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间
*/
var weekday=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var monthdays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var mydate=new Date();
var myyear=mydate.getFullYear();
var mymouth=mydate.getMonth();
var myday=mydate.getDate();//获取当前日期
var myweek=mydate.getDay();//获取当前星期几
if(myyear%4==0&&myyear%100==0||myyear%400==0){
	mouthdays[1]=29;
}
mydate.setDate(1);
var m=mydate.getDay();//获取当前月一号星期几
//document.write(mydate);
document.write(m);
document.write("<table width='400' border='1'>");
document.write("<tr align='center'><td colspan='7' >"+myyear+"年"+(++mymouth)+"月"+myday+"日"+" </td></tr>");
var n=1;
//var l=0
mymouth--;
document.write("<tr>");
for(var i=0;i<7;i++)
{
	document.write("<td>");
	document.write(weekday[i]);
	document.write("</td>");		
}
document.write("</tr>");
for(var i=0;i<5;i++){	
	if(m>0){
		document.write("<tr>");
		for(var j=0;j<m;j++){
			document.write("<td>");
			document.write("&nbsp;");
			document.write("</td>");	
		}
		for(var k=m;k<7;k++){
			if(n==myday){
				document.write("<td style='color:red'>");
				document.write(n);
				document.write("</td>");
			}
			else{
				document.write("<td >");
				document.write(n);
				document.write("</td>");
			}
			n++	
		}
		document.write("</tr>");
		m=0;
	}
	if(m==0){
		document.write("<tr>");
		for(var k=0;k<7;k++){
			if(n>monthdays[mymouth]){
				document.write("<td>");
				document.write("&nbsp;");
				document.write("</td>");
			}
			else{
				if(n==myday){
					document.write("<td style='color:red'>");
					document.write(n);
					document.write("</td>");
				}
				else{
					document.write("<td >");
					document.write(n);
					document.write("</td>");
				}
				n++;
			}		
		}
		document.write("</tr>");
	}
}
document.write("</table>");
</script>
</body>
</html>