2021-06-15コースまとめ
カレンダーの作成
本体
<body>
<select id="cmbYear" onchange="changeDay()"></select>
<select id="cmbMonth" onchange="changeDay()"></select>
<select id="cmbDay"></select>
<br>
<!-- .month>ul>li*3 -->
<div class="month">
<ul>
<li class="prev" onclick="changeCalendar(-1)">❮</li>
<li class="next" onclick="changeCalendar(1)">❯</li>
<li>
<span id="month">June</span><br>
<span id="year" style="font-size:18px">2021</span><br>
</li>
</ul>
</div>
<!-- ul.weekdays>li*7 -->
<ul class="weekdays">
<li>Su</li>
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
</ul>
<!-- ul.days>li*31>{$} -->
<ul class="days">
<!--
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li><span class="active">15</span></li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
-->
</ul>
</body>スタイルラベル
<style>
select{
width: 100px;
text-align: center;
}
* {box-sizing: border-box;}
ul {list-style-type: none;}
body {font-family: Verdana, sans-serif;}
.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.0%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.0%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #1abc9c;
color: white !important
}
</style>
<style>
li.prev:hover , li.next:hover{
cursor: pointer;
color:red;
}
</style>スクリプト#スクリプト#
<script>
var now = new Date();
var now_year = now.getFullYear();
var now_month = now.getMonth() + 1;
var now_date = now.getDate();
// 2021년 6월
function getLastDay(year, month){
var d = new Date(year, month, 0);
return d.getDate();
}
function getDayOfWeek(year, month, day){
var d = new Date(year, month-1, day);
return d.getDay(); // 0(일) ~ 6(토)
}
var spn_year = document.querySelector("span#year");
var spn_month = document.querySelector("span#month");
var ul_days = document.querySelector("ul.days");
spn_year.innerHTML = now_year;
spn_month.innerHTML = now_month;
// 2021 6
function printCalendar( year, month ){
var lastDay = getLastDay(year, month);
var dayOfWeek = getDayOfWeek(year, month, 1);
ul_days.innerHTML = "";
// 1일 위치 설정 - <li><li> 2개추가
for (var i = 1; i <= dayOfWeek ; i++) {
var li_day = document.createElement("li");
ul_days.appendChild(li_day);
}
// <li>1</li>
// <li><span class="active">15</span></li>
for (var i = 1; i <= lastDay ; i++) {
var li_day = document.createElement("li");
// DOM 텍스트node(노드)
var li_day_text = document.createTextNode( i );
// 년, 월, 일 같으면 class=active span 추가
if ( i == now_date
&&
parseInt(spn_year.innerHTML) == now_year
&&
spn_month.innerHTML == now_month) {
// <span class="active">15</span>
var li_day_spn = document.createElement("span");
li_day_spn.setAttribute("class", "active");
li_day_spn.appendChild(li_day_text);
// <li><span class="active">15</span></li>
li_day.appendChild(li_day_spn);
} else {
li_day.appendChild(li_day_text);
}
ul_days.appendChild(li_day);
} //
}
printCalendar(now_year, now_month);
</script>
<script>
function changeCalendar(value){ // 1(next) , -1(prev)
var year = parseInt( spn_year.innerHTML );
var month = parseInt( spn_month.innerHTML ) + value;
// 0 13
if (month == 0) {
month = 12;
year--;
} else if ( month == 13){
month = 1;
year++;
}
spn_year.innerHTML = year;
spn_month.innerHTML = month;
printCalendar(year, month);
}
</script>
<script>
var cmbYear = document.querySelector("#cmbYear");
var cmbMonth = document.querySelector("#cmbMonth");
var cmbDay = document.querySelector("#cmbDay");
// 년도를 선택할 수 있게 1970 ~ 2050
// 2021년 option 태그 selected = selected ?
// new Option(text[,value], drfaultSelected , selected)
for (var i = 1970; i <= 2050; i++) {
if(i == now_year)
cmbYear.options[i-1970] = new Option(i,i, true, true);
else
cmbYear.options[i-1970] = new Option(i,i);
}
// cmbMonth 1 월~ 12월
for (var i = 1 ; i <= 12; i++) {
cmbMonth.options[i-1] = new Option(i+"월",i);
}
// 6월
cmbMonth.selectedIndex = now_month - 1;
function setCmbDay(year, month){
var lastDay = getLastDay(year, month);
// 이전 option 제거
cmbDay.innerHTML = "";
// cmbDay.options = null;
// cmbDay.options.length= 0;
// cmbDay.length = 0;
for (var i = 1; i <= lastDay; i++) {
cmbDay.options[i-1] = new Option(i,i);
}
cmbDay.selectedIndex = now_date - 1;
}
setCmbDay(now_year, now_month);
</script>
<script>
function changeDay(){
var year= cmbYear.value;
var month= cmbMonth.value;
setCmbDay(year, month);
//
printCalendar(year, month);
spn_year.innerHTML = year;
spn_month.innerHTML = month;
}
</script>var d = new Date(year, month, 0);
return d.getDate();
}
function getDayOfWeek(year,month,day)-パラメータで年度月日を取得し、日付の週を計算する関数です.
var d = new Date(year, month-1, day);
return d.getDay(); //0(日)-6(土)
}
functionprintCalendar(year,month)-カレンダーを描く関数
var lastDay = getLastDay(year, month); - 最終日付
var dayOfWeek = getDayOfWeek(year, month, 1); - 月曜日
ul_days.innerHTML = ""; -- 시작시 초기화
// 1일 위치 설정 - <li><li> 2개추가
for (var i = 1; i <= dayOfWeek ; i++) { 수요일이면 일 월 화 만큼의 for문을 돌려 위치를 옮긴다
var li_day = document.createElement("li");
ul_days.appendChild(li_day);
} --1일 위치를 뒤로 미루는 for문
// <li>1</li>
// <li><span class="active">15</span></li>
for (var i = 1; i <= lastDay ; i++) {
var li_day = document.createElement("li");
// DOM 텍스트node(노드)
var li_day_text = document.createTextNode( i );
// 년, 월, 일 같으면 class=active span 추가
if ( i == now_date
&&
parseInt(spn_year.innerHTML) == now_year
&&
spn_month.innerHTML == now_month) { active를 추가하는 코딩
// <span class="active">15</span>
var li_day_spn = document.createElement("span");
li_day_spn.setAttribute("class", "active");
li_day_spn.appendChild(li_day_text);
// <li><span class="active">15</span></li>
li_day.appendChild(li_day_spn);
} else {
li_day.appendChild(li_day_text);
}
ul_days.appendChild(li_day);
} // 関数changeDay()
var year= cmbYear.value;
var month= cmbMonth.value;
setCmbDay(year, month);
//
printCalendar(year, month);
spn_year.innerHTML = year;
spn_month.innerHTML = month;for (var i = 1970; i <= 2050; i++) {
if(i == now_year)
cmbYear.options[i-1970] = new Option(i,i, true, true);
else
cmbYear.options[i-1970] = new Option(i,i);//cmbMonth 1月-12月
for (var i = 1 ; i <= 12; i++) {
cmbMonth.options[i-1]=new Option(i+「月」,i);
}--月に12月に追加
//6月
cmbMonth.selectedIndex = now_month - 1;
function setCmbDay(year,month){--selectのoptionを月の日数に変更する関数
var lastDay = getLastDay(year, month);
// 이전 option 제거
cmbDay.innerHTML = "";
// cmbDay.options = null;
// cmbDay.options.length= 0;
// cmbDay.length = 0;
for (var i = 1; i <= lastDay; i++) {
cmbDay.options[i-1] = new Option(i,i);
}
cmbDay.selectedIndex = now_date - 1;結果画面:
Reference
この問題について(2021-06-15コースまとめ), 我々は、より多くの情報をここで見つけました https://velog.io/@sungsill1/2021-06-15-수업-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol