지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > CSS+html은 간단한 달력을 구현합니다.

CSS+html은 간단한 달력을 구현합니다.

不言
풀어 주다： 2018-06-05 14:31:31
원래의
6020명이 탐색했습니다.

이 글에서는 주로 html, css, javascript의 조합으로 구현한 간단한 달력을 소개하고 있는데, 참고할만한 가치가 있으니 관심 있는 친구들이 참고하면 됩니다.

캘린더 표시는 웹페이지 선택 등 여러 곳에 사용됩니다. 이 글에서는 html, css, javascript를 사용하여 간단한 달력을 구현합니다. 완료되면 페이지 왼쪽의 효과와 유사하게 이전 달과 다음 달 간에 전환할 수 있습니다. 실제 상황에 따라 확대될 수도 있다.

html
html 부분은 비교적 간단하고 p를 선언하고 특정 html은 javascript로 생성됩니다. 전체적인 내용은 대략 다음과 같습니다. 

<!doctype html>
<html>
<head>
  <meta charset=&#39;utf-8&#39;>
  <link rel=&#39;stylesheet&#39; href=&#39;外部的css文件路径&#39; />  
  <title>demo</title>
</head>
<body>
  <p class=&#39;calendar&#39; id=&#39;calendar&#39;></p>
  <script type=&#39;text/javascript&#39; src=&#39;外部的javascript文件路径&#39;></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의 테두리 속성을 사용하여 절대 위치와 스타일이 지정됩니다.

javascript Date 객체
 정식 js 코드를 시작하기 전에 먼저 js의 Date 객체를 이해해야 합니다. Date 객체를 통해 연도, 월, 일, 시, 분, 초 등의 정보를 얻을 수 있습니다. 

 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일만 있으면 얻은 날짜 유형은 자동으로 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. dateObj 변수를 선언하고 현재 시스템 시간에 초기 값을 할당합니다.
2. 달력 p에서 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 p中的html部分
  renderHtml();
  // 表格中显示日期
  showCalendarData();
  // 绑定事件
  bindEvent();

  /**
   * 渲染html结构
   */
  function renderHtml() {
    var calendar = document.getElementById("calendar");
    var titleBox = document.createElement("p");  // 标题盒子 设置上一月 下一月 标题
    var bodyBox = document.createElement("p");  // 表格区 显示数据

    // 设置标题盒子中的html
    titleBox.className = &#39;calendar-title-box&#39;;
    titleBox.innerHTML = "<span class=&#39;prev-month&#39; id=&#39;prevMonth&#39;></span>" +
      "<span class=&#39;calendar-title&#39; id=&#39;calendarTitle&#39;></span>" +
      "<span id=&#39;nextMonth&#39; class=&#39;next-month&#39;></span>";
    calendar.appendChild(titleBox);    // 添加到calendar p中

    // 设置表格区的html结构
    bodyBox.className = &#39;calendar-body-box&#39;;
    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=&#39;calendarTable&#39; class=&#39;calendar-table&#39;>" +
              _headHtml + _bodyHtml +
              "</table>";
    // 添加到calendar p中
    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(&#39;data&#39;, _thisDayStr);
      if(_thisDayStr == getDateStr(new Date())) {    // 当前天
        _tds[i].className = &#39;currentDay&#39;;
      }else if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)) {
        _tds[i].className = &#39;currentMonth&#39;;  // 当前月
      }else {    // 其他月
        _tds[i].className = &#39;otherMonth&#39;;
      }
    }
  }

  /**
   * 绑定上个月下个月事件
   */
  function bindEvent() {
    var prevMonth = document.getElementById("prevMonth");
    var nextMonth = document.getElementById("nextMonth");
    addEvent(prevMonth, &#39;click&#39;, toPrevMonth);
    addEvent(nextMonth, &#39;click&#39;, 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(&#39;on&#39; + eType, function(e){
        func(e);
      });
    } else {  // DOM 0
      dom[&#39;on&#39; + 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;
  }
})();
로그인 후 복사

이 예에서는 테이블의 날짜를 클릭할 때의 이벤트가 바인딩 이벤트에 추가되지 않습니다. 클릭한 날짜의 정보를 얻는 함수 

var table = document.getElementById("calendarTable");
var tds = table.getElementsByTagName(&#39;td&#39;);
for(var i = 0; i < tds.length; i++) {
  addEvent(tds[i], &#39;click&#39;, function(e){
    console.log(e.target.getAttribute(&#39;data&#39;));
  });
}
로그인 후 복사

관련 추천:

javascript html5 캔버스는 드래그 가능한 중국 지방 지도를 구현합니다

위 내용은 CSS+html은 간단한 달력을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
js 日历
원천：php.cn
이전 기사：양식 제출 후 페이지를 새로 고치지 않고 HTML 기반 구현 구현 다음 기사：HTML 이스케이프 및 자바스크립트 삽입 공격을 방지하는 방법에 대한 간략한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿