网页日历与日期计算（一）

基本的网页日历与日期计算

最近刚刚开始学习前端，先从基础的html+css+js方面学习（参考w3c）。为了巩固学习成果，制作一个简单的网页日历以及日期计算，主要布局有：

• 页面显示日历，实现月份切换，显示当日日期不同色
• 点击“日期计算”可跳转至其他页面进行日期计算
• 设置背景，调整日历布局

https://github.com/LullabyLY/mygit/tree/master/calendar

设置日历显示

日历的顶部显示当前日期时间，例如：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中设置背景，根据背景显示日历做出调整。

###后记
此篇博客只涉及到部分代码，不是完整代码，下篇博客会接着介绍日期计算的有关代码。