今天浅谈一下用Date()这个对象，实现日历的方法
首先我们应该了解一下关于Date()获取日期的方法
获取当前年月日时分秒的get方法和set方法，不详细介绍，说一下组合用法
获取上个月的最后一天
var date = new Date();
date.setDate(0);
获取当前月的最后一天
var date = new Date();
date.setMouth(date.getMouth()+1);
date.setDate(0);
还有关于显示时分秒，月份，日的格式
function toZero(n) {
return n<10?'0'+n:''+n;
}
20160812.jpg
下边说一下布局的准备和样式：
<style>
#date-box{
background: rgba(0, 0, 0, 0.78);
color: #fff;
font-family: "Microsoft Yi Baiti";
width: 500px;
height: 240px;
}
#date-box>div{
position: relative;
top: 10px;
height: 30px;
}
#date-box #prev,#next{
cursor: pointer;
font-size: 22px;
margin: 0 30px;
padding:0 5px;
}
#prev{float: left; }
#next{float: right;}
ul{
list-style: none;
padding: 0;
}
#week-list:after,#date-list:after,#prev:after,#next:after{
display: table-cell;content: '';clear: both; }
#week-list li,#date-list li{
width: 14.2857%;
text-align: center;
float: left
; padding: 5px 0;
}</style>
<div id="date-box">
<div id="content-time">
<span id="time_Year"></span>
<span id="time_hour"></span>
</div>
<div>
<span id="prev"><</span>
<span id="next">></span>
</div>
<ul id="week-list">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>日</li>
</ul>
<ul id="date-list"> </ul>
</div>
关于js实现部分，注释比较详细，就不解释了
<script>
var date = new Date();
showTime();
setInterval(showTime,1000);
showDate(date);
function showDate(date) {
// 将时间设置为对象中月的第一天
date.setDate(1);
// 获取对象月份的第一天的是周几
var mouth = date.getMonth();
var week = date.getDay();
//将周日的标记0换成7
week = week ==0?7:week; date.setMonth(date.getMonth()+1);
// 设置为月份的最后一天
date.setDate(0);
// 获取对象月份的最后一天
var maxDate = date.getDate();
// 重新设置为当前月的第一天
// date.setDate(1);
var html = '';
// 对象月份中第一天是周几，就在相应的前边留空白
for (var i = 1 ; i < week;i++){
html += '<li></li>';
}
// 开始对象月份的编写显示
for (var j =1 ; j <=maxDate;j++){
html+='<li>' + j + '</li>'; }
var date_list = document.getElementById('date-list');
date_list.innerHTML = html;
var year = date.getFullYear(); document.getElementById('time_Year').innerHTML = year + '年' + toZero(mouth+1) +'月'; }
document.getElementById('prev').onclick = function () {
// 设置为上个月的最后一天
date.setDate(0);
showDate(date);
};
document.getElementById('next').onclick = function () { date.setDate(32); showDate(date); };
function showTime() {
var date = new Date();
var hour = date.getHours();
var minus = date.getMinutes();
var second = date.getSeconds(); document.getElementById('time_hour').innerHTML = toZero(hour) + ':' + toZero(minus) + ':'+toZero(second);
}
function toZero(n) {
return n<10?'0'+n:''+n;
}
</script>
