首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js css+html实现简单的日历

Posted in Javascript onJuly 14, 2016

web页面中很多地方都会用到日历显示，选择等，本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多，可以切换上个月、下个月。也可以根据实际情况进行扩展。

 js css+html实现简单的日历

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对象，可以获取到年月日时分秒以及时间戳等信息,具体参考: http://www.w3school.com.cn/jsref/jsref_obj_date.asp

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'));
  });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js css+html实现简单的日历

- Author -

申锦祥

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
javascript运算符——位运算符全面介绍
Jul 14 #Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 #Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 #Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 #Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 #Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 #Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 #Javascript
IIS(7) Windows server 2019(5) Windows server 2016(6) 生成缩略图(1) https(7) Telnet(1) 负载均衡(6) http(6) 远程控制(1) 动静分离(1)
You might like
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
Python命名空间详解
2014/08/18 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
阿迪达斯加拿大官网：Adidas加拿大
2016/08/25 全球购物
夏威夷灵感服装及配饰：Reyn Spooner
2018/09/18 全球购物
新春联欢会主持词
2014/03/24 职场文书
会计求职信
2014/05/29 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
入党现实表现材料
2014/12/23 职场文书
Java实现简单小画板
2022/06/10 Java/Android