这篇文章主要为大家详细介绍了由 html、CSS、javascript 结合实现的简单日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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;
- 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 对象,可以获取到年月日时分秒以及时间戳等信息, 具体参考: {aa0aa}
- var d1 = new Date(); // 获取当前系统时间 我现在的时间是 2016年4月25日 星期一
- d1.getFullYear(); // 获取年信息, 2016
- d1.getMonth(); // 获取月信息(从0开始 范围:0-11) 3
- d1.getDate(); // 获取天信息 此处结果:25
- d1.getDay(); // 获取星期信息 (0-6) 此处结果: 1
也可以在初始化的时候直接设置年月日信息
- # 设置 2016年3月15日
- var d2 = new Date(2016, 2, 15); // 月是从0开始计数, 需要减一
- d2.getFullYear(); // 2016
- d2.getMonth(); // 2
- d2.getDate(); // 15
- d2.toLocaleDateString(); // "2016/3/15" 证明设置正确
日历中会涉及到每个月多少天之类的问题,在 js 中很简单,如果设置年月日的时候,超出当月,js 会自动算成下个月的,例如 4 月只有 30 天,如果设置成 31 日,获得的 Date 类型中自动会算成 5 月 1 日;如果设置成 5 月 0 日,js 会处理成 4 月 30 日,那么 5 月 - 1 日也就是 4 月 29 日
- var d3 = new Date(2016, 3, 30);
- d3.toLocaleDateString(); // "2016/4/30"
- var d4 = new Date(2016, 3, 31);
- d4.toLocaleDateString(); // "2016/5/1"
- var d5 = new Date(2016, 3, 33);
- d5.toLocaleDateString(); // "2016/5/3"
- var d6 = new Date(2016, 4, 1);
- d6.toLocaleDateString(); // "2016/5/1"
- var d7 = new Date(2016, 4, 0);
- d7.toLocaleDateString(); // "2016/4/30"
- var d8 = new Date(2016, 4, -3);
- d8.toLocaleDateString(); // "2016/4/27"
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结构
- */
- 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'));
- });
- }
来源: http://www.phperz.com/article/17/0327/264276.html