jscss+html实现简单的⽇历
web页⾯中很多地⽅都会⽤到⽇历显⽰，选择等，本⽂⽤html、css、javascript实现简单的⽇历。完成以后的效果与页⾯左侧的效果差不多，可以切换上个⽉、下个⽉。也可以根据实际情况进⾏扩展。
html
html部分⽐较简单，声明⼀个div，具体的html⽤javascript⽣成。整体内容⼤概是这样的：
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='外部的css⽂件路径' />
<title>demo</title>
</head>
<body>
<div class='calendar' id='calendar'></div>
<script type='text/javascript' src='外部的javascript⽂件路径'></script>
</body>
</html>
css
/* 整体设置 */
*{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;
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对象，可以获取到年⽉⽇时分秒以及时间戳等信息，具体参考:
var d1 = new Date(); // 获取当前系统时间我现在的时间是 2016年4⽉25⽇星期⼀
也可以在初始化的时候直接设置年⽉⽇信息
# 设置 2016年3⽉15⽇
var d2 = new Date(2016, 2, 15); // ⽉是从0开始计数，需要减⼀
⽇历中会涉及到每个⽉多少天之类的问题，在js中很简单，如果设置年⽉⽇的时候，超出当⽉，js会⾃动算成下个⽉的，例如4⽉只有30天，如果设置成31 ⽇，获得的Date类型中⾃动会算成5⽉1⽇；如果设置成5⽉0⽇，js会处理成4⽉30⽇，那么5⽉-1⽇也就是4⽉29⽇
var d3 = new Date(2016, 3, 30);
var d4 = new Date(2016, 3, 31);
var d5 = new Date(2016, 3, 33);
var d6 = new Date(2016, 4, 1);
var d7 = new Date(2016, 4, 0);
var d8 = new Date(2016, 4, -3);
javascript
了解了js中Date对象的基本⽤法，接下来就是代码实现部分了，整体思路是这样的：定义⼀个全局的dateObj变量，⽤来记录表格中需要显⽰的 年⽉信息。 标题中的内容根据dateObj中取，表格中的⽇期则中dateObj中取到年⽉对应的1号的所有信息，即可确定1号在表格第⼀⾏的位置，以此倒推上个⽉ 最后⼏天的数据、正推本⽉和下个⽉的数据。
具体步骤：
1.声明dateObj变量，并赋初值为当前系统时间
2.给calendar div中渲染html元素
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 document是什么* 渲染html结构
*/
function renderHtml() {
var calendar = ElementById("calendar");
var titleBox = ateElement("div"); // 标题盒⼦设置上⼀⽉下⼀⽉标题
var bodyBox = ateElement("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 = Date().getFullYear();
var _month = Date().getMonth() + 1;
var _dateStr = Date());
// 设置顶部标题栏中的年、⽉信息
var calendarTitle = ElementById("calendarTitle");
var titleStr = _dateStr.substr(0, 4) + "年" + _dateStr.substr(4,2) + "⽉";
calendarTitle.innerText = titleStr;
// 设置表格中的⽇期数据
var _table = ElementById("calendarTable");
var _tds = _ElementsByTagName("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 - _Day());
var _thisDayStr = getDateStr(_thisDay);
_tds[i].innerText = _Date();
//_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 = ElementById("prevMonth");
var nextMonth = ElementById("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 = Date();
dateObj.setDate(new FullYear(), Month() - 1, 1)); showCalendarData();
}
/**
* 点击下个⽉图标触发
*/
function toNextMonth() {
var date = Date();
dateObj.setDate(new FullYear(), Month() + 1, 1)); showCalendarData();
}
/**
* ⽇期转化为字符串， 4位年+2位⽉+2位⽇
*/
function getDateStr(date) {
var _year = FullYear();
var _month = Month() + 1; // ⽉从0开始计数
var _d = Date();
_month = (_month > 9) ? ("" + _month) : ("0" + _month);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论