首页
所有分类
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多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
微信公众平台开发教程（四） 实例入门：机器人回复(附源码)
Dec 02 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 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
意大利购物网站(128) 阿根廷购物网站(9) 俄罗斯购物网站(137) 印尼购物网站(37) 丹麦购物网站(22) 法国购物网站(144) 澳大利亚购物网站(309) 肯尼亚购物网站(2) 埃及购物网站(2) 台湾购物网站(77)
You might like
php生成随机密码的几种方法
2011/01/17 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP简单实现图片格式转换(jpg转png，gif转png等)
2019/10/30 PHP
javascript 三种编解码方式
2010/02/01 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）
2014/10/17 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）
2015/08/26 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue组件（全局，局部，动态加载组件）
2018/09/02 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
Python中的zip函数使用示例
2015/01/29 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
viagogo意大利票务平台：演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
大学三年计划书范文
2014/04/30 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Python上下文管理器Content Manager
2021/06/26 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技