html 간이캘린더 구현 (소스코드 첨부)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

html 간이캘린더 구현 (소스코드 첨부)

烟雨青岚

Jun 16, 2020 pm 12:32 PM

html 달력

html 간이캘린더 구현 (소스코드 첨부)

html 단순 달력 구현(소스 코드 포함)

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

html

html 부분은 비교적 간단하고 div를 선언하고 특정 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>
  <div class=&#39;calendar&#39; id=&#39;calendar&#39;></div>
  <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 객체를 통해 연도, 월, 일, 시, 분, 초, 타임스탬프 등을 얻을 수 있습니다. 자세한 내용은 http://www.w3school.com.cn/jsref/jsref_obj_date.asp

var d1 = new Date() // 현재 시간을 확인하세요. 4월 25일 월요일입니다. 2016

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부터 시작하여 1을 빼야 합니다.

d2.getFullYear() // 2016

d2.getMonth(); // 2

d2.getDate () ; 연, 월, 일을 설정할 때 현재 월을 초과하면 js는 자동으로 다음 달로 계산합니다. days를 31일로 설정하면 획득된 날짜 유형이 자동으로 5월 1일로 계산됩니다. 5월 0일로 설정하면 js는 4월 30일로 처리되므로 May-1은 4월 29일입니다. javascript

js에서 Date 객체의 기본 사용법을 이해하고, 다음 단계는 코드 구현 부분입니다. 전체적인 아이디어는 다음과 같습니다. 테이블. 제목의 내용은 dateObj에서 가져오고, 테이블의 날짜는 dateObj에서 가져옵니다. 연도와 월에 해당하는 첫 번째 정보를 모두 확인할 수 있으며, 테이블의 첫 번째 행에서 첫 번째 위치가 결정됩니다. 지난 달을 거꾸로 계산할 수 있으며, 며칠 동안의 데이터, 이번 달, 다음 달의 데이터가 푸시됩니다.

구체적인 단계:

1. dateObj 변수를 선언하고 현재 시스템 시간에 초기 값을 할당합니다.

2 달력 div에서 html 요소를 렌더링합니다.

3. 월부터 dateObj 정보까지, 이를 사용하여 테이블의 모든 날짜를 탐색합니다.

4. 이전 달과 다음 달의 아이콘에 이벤트를 바인딩합니다.

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"

로그인 후 복사

읽어주셔서 감사합니다. 도움이 되셨으면 좋겠습니다. 많이. 이 기사는 다음에서 복제되었습니다: https://blog.csdn.net/qq_39198420/article/details/78402873

추천 튜토리얼: "HTML Tutorial

위 내용은 html 간이캘린더 구현 (소스코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.