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 onclick="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.onload=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.onchange=function(){
showDates();
};
monthSelect.onchange=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();
}