简单日历

最新推荐文章于 2021-05-02 15:53:57 发布

瘦瘦瘦大人

最新推荐文章于 2021-05-02 15:53:57 发布

阅读量268

点赞数 1

分类专栏： JavaScript 文章标签： HTML CSS JavaScript

本文链接：https://blog.csdn.net/qq_37380802/article/details/80793588

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单日历</title>
	<link rel="stylesheet" type="text/css" href="d.css">
	<script type="text/javascript" src="calendar.js"></script>

</head>
<body>
	<div id="calendar">
		<div id="month_year">
			<select id="year"></select>年
			<select id="month"></select>月
		</div>
		<ul id="title">
			<li>星期日</li>
			<li>星期一</li>
			<li>星期二</li>
			<li>星期三</li>
			<li>星期四</li>
			<li>星期五</li>
			<li>星期六</li>
		</ul>
		<ul id="datesUl"></ul>
	</div>
	<button οnclick="oo()">星期</button>
	
</body>
</html>

CSS部分

*{
	margin: 0;
	padding: 0;
	/*	列表格式设置为none，就是没有格式。*/
	list-style: none;   
}
#calendar{
	width: 700px;
	background-color: lightgray;
	margin: 20px auto;

}
#calendar::after{
	content: "";
	display: block;
	clear: both;

}
#month_year{
	width: 700px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
ul>li{
	float: left;
	width: 100px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
/*:empty选择器匹配没有子元素（包括文本节点）的每个元素。*/
#datesUl>li:empty{
	opacity: 0;
}
#datesUl>li:hover{
	background-color: lightblue;
}

JavaScript部分

window.οnlοad=init;


function init(){
var yearSelect=document.getElementById("year");
var monthSelect=document.getElementById("month");
var datesUl=document.getElementById("datesUl");
	// alert("ok");
	// alert(yearSelect);
	// alert(monthSelect);
	for (var year =1990; year<3000; year++) {  //初始化两个选项卡
		createOption(year,year,yearSelect);
	}
	for (var month=1; month < 13; month++) {
		createOption(month,month,monthSelect);
	}
	var now=new Date();     //获取当前的日期
	showSelect(now.getFullYear(),now.getMonth()+1);   //引用显示选项卡的函数

	showDates(); //调用显示日期函数

	yearSelect.οnchange=function(){
		showDates();
	};
	monthSelect.οnchange=function(){
		showDates();
	}
}
	
//
function createOption(text,value,parent){
	var option=document.createElement('option');
	option.innerHTML=text;
	option.value=value;
	parent.appendChild(option);

}
//获取当前日期并显示在选项卡中
function showSelect(year,month){
	var yearSelect=document.getElementById("year");
var monthSelect=document.getElementById("month");
var datesUl=document.getElementById("datesUl");
	yearSelect.value=year;
	monthSelect.value=month;

}
//获取选择的年月的第一天是星期几
function getDays(year,month){
	var d=new Date(year,month,1);
	// var d=new Date();
	// d=new Date(d.setDate(1));
	return d.getDay();
	

}
function oo(){
	var o=new Date('2018','6','24');
	var v=o.getDay();
	alert(v);
}
//根据当前select中的年和月来显示日期
function showDates(){
	var yearSelect=document.getElementById("year");
	var monthSelect=document.getElementById("month");
	var datesUl=document.getElementById("datesUl");

	datesUl.innerHTML="";
	var year=yearSelect.value;
	var month=monthSelect.value;
	//创建空的li
	for (var i = 0; i < getDays(year, month); i++) {
		createLi("",datesUl);
	}
	//创建有日期的li
	for (var j = 1; j <= getDatesOfMonth(year, month); j++) {
		createLi(j,datesUl);
	}

}
//创建li并添加至对应的容器
function createLi(text,parent){
	var li=document.createElement("li");
	li.innerHTML=text;
	parent.appendChild(li);

}
//创建一个输入年月计算出这个月有几天的函数
function getDatesOfMonth(year,month){
	var d=new Date(year,month,0);
	return d.getDate();

}

瘦瘦瘦大人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单日历

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单日历&lt;/title&gt; &lt;link rel="stylesheet" type="text/css"
复制链接

扫一扫