基本的网页日历与日期计算
最近刚刚开始学习前端,先从基础的html+css+js方面学习(参考w3c)。为了巩固学习成果,制作一个简单的网页日历以及日期计算,主要布局有:
- 页面显示日历,实现月份切换,显示当日日期不同色
- 点击“日期计算”可跳转至其他页面进行日期计算
- 设置背景,调整日历布局
设置日历显示
日历的顶部显示当前日期时间,例如:2018年7月31日22:32。在当前日期的右边,设置一个button日期计算,点击之后可以跳转至其他页面。顶部的下面显示当前日历月份,月份两边分别设置两个“三角形”,可以实现月份切换。之后就是日历的表格部分。
(随笔一画,差不多就是这个样子)
结果显示
CSS布局
分为三个部分,上、中、下三个部分。
.calendar{
width: 400px;
height: 350px;
display: block;
position: absolute;
left: 65%;
top: 10%;
}
.calendar.top{
position: absolute;
width: 100%;
height: 36px;
font-size: 12px;
}
.calendar .calendar-title-box{
position: relative;
width: 100%;
height: 36px;
line-height: 36px;
text-align:center;
border-bottom: 1px solid #ddd;
}
.calendar-table{
width: 100%;
border-collapse: collapse;
text-align:center;
}
.calendar-table tr{
height: 30px;
line-height: 30px;
}
上下个月的按钮图标我使用边框来制作三角形,当然也可以使用其他的,例如 ‘>>’
.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;
}
(不是完整代码)
JavaScript实现日历表格
设置calendar div中的html部分
function renderHtml() {
var calendar = document.getElementById("calendar");
var todayBox=document.createElement("div");//显示今日日期
var titleBox = document.createElement("div"); // 标题盒子 设置上一月 下一月 标题
var bodyBox = document.createElement("div"); // 表格区 显示数据
// 设置标题盒子中的html
todayBox.className = 'top';
todayBox.innerHTML = "<span class='top' id='calendartopBox'></span>"
calendar.appendChild(todayBox); // 添加到calendar div中
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 calendartopBox=document.getElementById("calendartopBox");
var datetoday=new Date();
var topyear=datetoday.getFullYear();
var topmonth=datetoday.getMonth()+1;
var topdate=datetoday.getDate();
var tophours=datetoday.getHours();
var topminutes=datetoday.getMinutes();
if(tophours<10)
tophours='0'+tophours;
if(topminutes<10)
topminutes='0'+topminutes;
var topStr = topyear + "年" +topmonth + "月" + topdate + "日" + tophours + ":" + topminutes;
calendartopBox.innerText = topStr;
// 设置表格中的日期数据
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';
}
}
}
设置背景,调整日历布局
在html中设置背景,根据背景显示日历做出调整。
后记
此篇博客只涉及到部分代码,不是完整代码,下篇博客会接着介绍日期计算的有关代码。