Date对象 日历实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日历</title>
<style>
*{
margin: 0;
padding: 0;
}
#main{
width: 280px;
border: 1px solid #424242;
margin: 20px auto;
}
#main > p{
display: flex;
justify-content : space-between;
}
#main > h5{
text-align: center;
}
#main > p > span{
padding: 0 10px;
}
#prev,#next{
cursor: pointer;
}
#title{
overflow: hidden;
list-style: none;
background-color: #ccc ;
}
#title > li{
float: left;
width: 40px;
height: 26px;
line-height: 26px;
text-align: center;
}
#mainDate{
overflow: hidden;
list-style: none;
}
#mainDate > li{
float: left;
width: 40px;
height: 40px;
border: 2px solid #fff;
box-sizing: border-box;
line-height: 40px;
text-align: center;
cursor: pointer;
}
#mainDate .bkgred:hover{
background-color: #ccc;
}
.red{
color:red;
}
</style>
</head>
<body>
<div id="main">
<p>
<span id="prev">上一月</span>
<span id="year"></span>
<span id="next">下一月</span>
</p>
<h5 id="month"></h5>
<ul id="title">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id="mainDate">
</ul>
</div>
<script>
var date = new Date();
add();
function add(){
var currentYear = date.getFullYear();
var year = document.getElementById('year');
year.innerHTML = currentYear;
var currentMonth = date.getMonth();
var month = document.getElementById('month');
var arrMonth = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
month.innerHTML = arrMonth[currentMonth];
var week = new Date(currentYear,currentMonth,1).getDay();
var days = new Date(currentYear,currentMonth+1,-1).getDate()+1;
var html = '';
var mainDate = document.getElementById('mainDate');
for(var i = 0;i < week;i++){
html += '<li></li>';
}
var currentDay = date.getDate();
for(var i = 1;i <= days;i++){
if(i == currentDay)
{
html += '<li class="red">' + i +'</li>';
}else{
html += '<li class="bkgred">' + i +'</li>';
}
}
mainDate.innerHTML = html;
}
var prev = document.getElementById('prev');
var next = document.getElementById('next');
prev.onclick = function(){
date.setMonth(date.getMonth()-1);
add();
}
next.onclick = function(){
date.setMonth(date.getMonth()+1);
add();
}
</script>
</body>
</html>