您的位置：首页 > Web前端 > JavaScript

JS简易日历实现

2017-11-01 16:20 399 查看

效果图

实现点

01.表格行数问题

首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列

getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。

并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天

firstday = new Date(y, m, 1), //获取当月的第一天

02打印日历表格

表格本身是一个二维数组，所以让for大师出来跑两个循环

html

<!DOCTYPE html>
<html>
<head>
<title>js实现简易日历</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/calendar.css">

<script src="js/lib.js"></script>
<script src="js/main.js"></script>
<script>
window.onload = function(){

renderHtml();
showCalendarData();
bindEvent();
}
</script>
</head>
<body>
<div class="calendar" id="calendar">
</div>

</body>
</html>

css部分

@charset='utf-8';

*{margin: 0;padding:0;}
.calendar{
margin: 10px auto;
width: 240px;
/*height: 400px;*/
padding: 10px;
border: 1px solid  #ddd;

}
.calendar .calendar-title-box{
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
text-align: center;

border-bottom: 1px solid  #ddd;

}

.calendar .prev-month {
display: inline-block;
cursor: pointer;
width: 0px;height: 0px;
border-left: 0px;
border-top: 6px solid transparent;
border-right: 8px solid #999;
border-bottom: 6px solid transparent;

position: absolute;
top: 12px;
left:0px;
}
.calendar .next-month {
display: inline-block;
cursor: pointer;
width: 0px;height: 0px;
/*border-left: 0px;*/
border-right: 0;
border-top: 6px solid transparent;
/*border-right: 8px solid #999;*/
border-left: 8px solid #999;
border-bottom: 6px solid transparent;
position: absolute;
top: 12px;
right: 0px
}

.calendar-body-box{

}

.calendar .calendar-table {
border-collapse: collapse;
text-align: center;

e3a6
width: 100%;

}

.calendar .calendar-table tr {
height: 30px;
line-height: 30px;
}

.calendar .cur-day{
color: red;
}
.calendar .cur-mounth{
color: #999;
}
.calendar .other-mounth{
color:#ede;
}

js部分

/*
日历事件，可发挥
*/

function bindEvent(){
var prevMonth = document.getElementById("prevMonth");

var toPrevMonth = function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() - 1, 1));
showCalendarData();
};
addEvent(prevMonth, 'click', toPrevMonth);

var toNextMonth = function(){
var date = dateObj.getDate();
dateObj.setDate(new Date(date.getFullYear(), date.getMonth() + 1, 1));
showCalendarData();
}

var nextMonth = document.getElementById("nextMonth");
addEvent(nextMonth, 'click', toNextMonth);

}

// getElementById()
// getElementsByTagName()

function showCalendarData(){
var odate = dateObj.getDate();
var titlestr = getDateStr(odate,'title');

console.log(titlestr);
var calendarTitle = document.getElementById('calendarTitle');
calendarTitle.innerText = titlestr;
// con
var calendarTable = document.getElementById('calendarTable');
var tds = calendarTable.getElementsByTagName('td');

var _firstDay = new Date(odate.getFullYear(), odate.getMonth(), 1);  // 当前月第一天

for(var i = 0,len= tds.length; i<len;i++) {
var _thisDay = new Date(odate.getFullYear(),
odate.getMonth(),
i + 1 - _firstDay.getDay());
var _thisDayStr = getDateStr(_thisDay,'YYYYMMDD');
var item = tds[i];
item.innerText = _thisDay.getDate();
item.setAttribute('data', _thisDayStr);

// 当前天
if(_thisDayStr == getDateStr(odate,'YYYYMMDD')) {
item.className ='cur-day';
}else if(_thisDayStr.substr(0, 6)
== getDateStr(_firstDay,'YYYYMMDD').substr(0, 6)) {
item.className ='cur-mounth';
}else{
item.className ='other-mounth';
}

}

// console.log(_thisDayStr.substr(0,6));

}

// renderHtml()
function renderHtml(){
var calendar = document.getElementById('calendar');
var calendar_top = document.createElement('div');
var calendar_con = document.createElement('div');

calendar_top.className='calendar-title-box';
calendar_top.innerHTML='<span class="prev-month" id="prevMonth"></span>'
+'<span class="calendar-title" id="calendarTitle"></span>'
+'<span class="next-month" id="nextMonth"></span>';

// 表格区
calendar_con.className='calendar-body-box';

var _th ='<tr>'
+'<th>日</th>'
+'<th>一</th>'
+'<th>二</th>'
+'<th>三</th>'
+'<th>四</th>'
+'<th>五</th>'
+'<th>六</th>'
+'</tr>';

var _tbody ='';
for(var i=0;i<6;i++){
_tbody+='<tr>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'<td></td>'
+'</tr>';

};

calendar_con.innerHTML='<table class="calendar-table" id="calendarTable">'
+_th+_tbody+'</table>';
calendar.appendChild(calendar_top);
calendar.appendChild(calendar_con);

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航