zoukankan      html  css  js  c++  java
  • js css+html实现简单的日历

    HTML文件

    <!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 #000;
      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;
    }

    JavaScript文件

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

    结束

  • 相关阅读:
    Educational Codeforces Round 86 (Rated for Div. 2) D. Multiple Testcases
    Educational Codeforces Round 86 (Rated for Div. 2) C. Yet Another Counting Problem
    HDU
    HDU
    HDU
    HDU
    Good Bye 2019 C. Make Good (异或的使用)
    Educational Codeforces Round 78 (Rated for Div. 2) C. Berry Jam
    codeforces 909C. Python Indentation
    codeforces1054 C. Candies Distribution
  • 原文地址:https://www.cnblogs.com/yimai-series/p/13749599.html
Copyright © 2011-2022 走看看