js css+html实现简洁的日历_

js css+html实现简洁的日历_
web页面中许多地方都会用到日历显示，选择等，本
文用html、css、javascript实现简洁的日历。

完成以后的
效果与页面左侧的效果差不多，可以切换上个月、下个月。

也可以依据实际状况进行扩展。

html
html部分比较简洁，声明一个div，具体的html用javascript生成。

整体内容也许是这样的：
!doctype html
html
head
meta charset='utf-8'
link rel='stylesheet' href='外部的css文件路径' / titledemo/title
/head
body
div class='calendar' id='calendar'/div
script type='text/javascript' src='外部的javascript文件路径'/script
/body
/html
/* 整体设置 */
*{margin:0px;padding:0px;}
/**
* 设置日历的大小
*/
.calendar{
width: 240px;
height: 400px;
display: block;
}
/**
* 设置日历顶部盒子
*/
.calendar .calendar-title-box{ position: relative;
width: 100%;
height: 36px;
line-height: 36px;
text-align:center;
border-bottom: 1px solid #ddd; }
* 设置上个月的按钮图标
*/
.calendar .prev-month {
position: absolute;
top: 12px;
left: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-left: 0px;
border-top: 6px solid transparent;
border-right: 8px solid #999;
border-bottom: 6px solid transparent; cursor: pointer;
}
/**
* 设置下个月的按钮图标
*/
.calendar .next-month {
position: absolute;
top: 12px;
right: 0px;
display: inline-block;
width: 0px;
height: 0px;
border-right: 0px;
border-top: 6px solid transparent;
border-left: 8px solid #999;
border-bottom: 6px solid transparent; cursor: pointer;
}
/* 设置日历表格样式 */
.calendar-table{
width: 100%;
border-collapse: collapse;
text-align:center;
}
/* 表格行高 */
.calendar-table tr{
height: 30px;
line-height: 30px;
}
/* 当前天颜色特别显示 */
.currentDay {
color: red;
}
/* 本月文字颜色 */
.currentMonth {
color: #999;
}
/* 其他月颜色 */
.otherMonth{
color: #ede;
}
样式设置基本没什么课说的，一些简洁的设置。

比如特别的是表示“上个月”、“下个月”的图标，采纳的肯定定位、利用css中的border属性设置样式。

javascript Date对象
开头正式的js代码之前，需要先了解js中的Date对象，通过Date对象，可以猎取到年月日时分秒以准时间戳等信息,具体参考: l元素
3.通过dateObj猎取当月1号的信息，并以此遍历出表格中全部日期
4.给上一月、下一月图标绑定大事
(function(){
/*
* 用于记录日期，显示的时候，依据dateObj中的日期的年月显示
*/
var dateObj = (function(){
var _date = new Date(); // 默认为当前系统时间 return {
getDate : function(){
return _date;
},
setDate : function(date) {
_date = date;
}
};
})();
// 设置calendar div中的html部分
renderHtml();
// 表格中显示日期
showCalendarData();
// 绑定大事
bindEvent();
/**
* 渲染html结构
*/
function renderHtml() {
var calendar = document.getElementById("calendar");
var titleBox = document.createElement("div"); // 标题盒子设置上一月下一月标题
var bodyBox = document.createElement("div"); // 表格区显示数据
// 设置标题盒子中的html
titleBox.className = 'calendar-title-box';
titleBox.innerHTML = "span class='prev-month' id='prevMonth'/span" +
"span class='calendar-title' id='calendarTitle'/span" +
"span id='nextMonth' class='next-month'/span"; calendar.appendChild(titleBox); // 添加到calendar div中
// 设置表格区的html结构
bodyBox.className = 'calendar-body-box';
var _headHtml = "tr" +
"th日/th" +
"th一/th" +
"th二/th" +
"th三/th" +
"th四/th" +
"th五/th" +
"th六/th" +
"/tr";
var _bodyHtml = "";
// 一个月最多31天，所以一个月最多占6行表格
for(var i = 0; i 6; i++) {
_bodyHtml += "tr" +
"td/td" +
"td/td" +
"td/td" +
"td/td" +
"td/td" +
"td/td" +
"td/td" +
"/tr";
}
bodyBox.innerHTML = "table id='calendarTable' class='calendar-table'" +
_headHtml + _bodyHtml +
"/table";
// 添加到calendar div中
calendar.appendChild(bodyBox);
}
/**
* 表格中显示数据，并设置类名
*/
function showCalendarData() {
var _year = dateObj.getDate().getFullYear();
var _month = dateObj.getDate().getMonth() + 1; var _dateStr = getDateStr(dateObj.getDate()); // 设置顶部标题栏中的年、月信息
var calendarTitle = document.getElementById("calendarTitle");
var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "月";
calendarTitle.innerText = titleStr;
// 设置表格中的日期数据
var _table = document.getElementById("calendarTable");
var _tds = _table.getElementsByTagName("td");
var _firstDay = new Date(_year, _month - 1, 1); // 当前月第一天
for(var i = 0; i _tds.length; i++) {
var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
var _thisDayStr = getDateStr(_thisDay);
_tds[i].innerText = _thisDay.getDate();
//_tds[i].data = _thisDayStr;
_tds[i].setAttribute('data', _thisDayStr);
if(_thisDayStr == getDateStr(new Date())) { // 当前天
_tds[i].className = 'currentDay';
}else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
_tds[i].className = 'currentMonth'; // 当前月 }else { // 其他月
_tds[i].className = 'otherMonth';
}
}
}
/**
* 绑定上个月下个月大事
*/
function bindEvent() {
var prevMonth = document.getElementById("prevMonth");
var nextMonth = document.getElementById("nextMonth");
addEvent(prevMonth, 'click', toPrevMonth);
addEvent(nextMonth, 'click', toNextMonth);
}
/**
* 绑定大事
*/
function addEvent(dom, eType, func) {
if(dom.addEventListener) { // DOM 2.0
dom.addEventListener(eType, function(e){
func(e);
});
} else if(dom.attachEvent){ // IE5+
dom.attachEvent('on' + eType, function(e){
func(e);
});
} else { // DOM 0
dom['on' + eType] = function(e) {
func(e);
}
}
}
/**
* 点击上个月图标触发
*/
function toPrevMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showCalendarData();
}
/**
* 点击下个月图标触发
*/
function toNextMonth() {
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showCalendarData();
}
/**
* 日期转化为字符串， 4位年+2位月+2位日
*/
function getDateStr(date) {
var _year = date.getFullYear();
var _month = date.getMonth() + 1; // 月从0开头计数
var _d = date.getDate();
_month = (_month 9) ? ("" + _month) : ("0" + _month);
_d = (_d 9) ? ("" + _d) : ("0" + _d);
return _year + _month + _d;
}
})();
本例中并没有添加点击表格中日期时候的大事，可以在bindEvent函数中添加如下代码猎取所点击日期的信息
var table = document.getElementById("calendarTable");
var tds = table.getElementsByTagName('td');
for(var i = 0; i tds.length; i++) {
addEvent(tds[i], 'click', function(e){
console.log(e.target.getAttribute('data')); });
}
以上就是本文的全部内容，盼望对大家的学习有所关心 ...。