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();
}