라라리라
2023.10.05 / Step 6 [DOM_달력1단계] - 코딩 63 일차 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="load()">
<style>
#header{
text-align: center;
}
table, td, tr{
border-collapse: separate;
margin: auto;
border-spacing: 2px;
}
td{
width: 60px;
height: 50px;
text-align: center;
border: 1px solid black;
}
</style>
<div id="header">
<table>
<tr>
<td colspan="4"><span id="today"></span></td>
</tr>
<tr>
<td><span id="year_"></span>년</td>
<td><span id="month_"></span>월</td>
<td><button onclick="pri()">△</button></td>
<td><button onclick="next()">▽</button></td>
</tr>
</table>
</div>
<div id="center"></div>
<div id="footer"></div>
<script>
let $center = document.querySelector(`#center`)
let now = new Date();
let $List = [];
let year = now.getFullYear();
let month = now.getMonth();
let hour = now.getHours();
let date = now.getDate();
let day = now.getDay();
let num = 0;
///////////////////////////
let cal_start = new Date(year, month, 1);
let cal_daystart = cal_start.getDay();
let cal_datestart = cal_start.getDate();
let cal_end = new Date(year, month + 1, 0);
let cal_dayend = cal_end.getDay();
let cal_dateend = cal_end.getDate();
console.log(cal_daystart)
console.log(cal_datestart)
console.log(cal_dayend)
console.log(cal_dateend)
////////////////////////////////////
let size = 7;
let dayid = [`일`, `월`, `화`, `수`, `목`, `금`, `토`];
today.innerHTML = `${year}년 ${month + 1}월 ${date}일 ${dayid[day]}요일`
let $table = document.createElement(`table`);
for(let i = 0; i < 1; i++){
let $tr = document.createElement(`tr`);
for(let j = 0; j < size; j++){
let $td = document.createElement(`td`);
$td.innerText = dayid[j];
$tr.append($td);
}
$table.append($tr);
$center.append($table);
}
for(let i = 0; i < 6; i++){
$tr = document.createElement(`tr`);
let $temp = [];
for(let j = 0; j < size; j++){
$td = document.createElement(`td`);
$temp.push($td);
$tr.append($td);
}
$List.push($temp);
$table.append($tr);
}
//오늘 인덱스 구하기? i 값 = parseInt(date / 7)? x값 = day today_index = parseint(date / 7)
function load(){
year_.innerHTML = year;
month_.innerHTML = month + 1;
let today_index = $List[parseInt(date/7)][day];
today_index.innerHTML = date;
let start_index = $List[parseInt(cal_datestart / 7)][cal_daystart]
let id = 0;
for(let i = 1; i <= cal_dateend; i++){ //cal_dateend = 31;
cal_start = new Date(year, month, i); //2023 8 1 //2023 8 2
cal_daystart = cal_start.getDay(); // 2(화) // 3(수)
if(cal_daystart == 0){id++}; //cal_daystart가 0이면 (일요일이면) 한줄내리기
let start_index = $List[id][cal_daystart] //시작인덱스는 [ID][cal_daystart]
start_index.innerHTML = i; // start_index의 값 = i
}
}
function pri(){ // 이전 달력
for(let i = 0; i < 6; i++){ //달력 내용 초기화
for(let j = 0; j < size; j++){
$List[i][j].innerText = ``;
}
}
month--; //월 --;
if(month == -1){ //월이 -1(0월)이 되면
month = 11; //11(12월)로 변경
year--; //년도 -1;
}
load();
}
function next(){ //다음월
for(let i = 0; i < 6; i++){ //달력 초기화
for(let j = 0; j < size; j++){
$List[i][j].innerText = ``; //기존내용삭제
}
}
month++; //월++;
if(month == 12){ //12(13월일시)
month = 0; //0(1월)로 변경
year++ //+ 년도 증가
}
load();
}
</script>
</body>
</html>
| 년 | 월 | ||
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.10 / Step 6 [DOM_장바구니] - 코딩 65 일차 (0) | 2023.10.10 |
|---|---|
| 2023.10.06 / Step 6 [DOM_달력2단계] - 코딩 64 일차 (0) | 2023.10.06 |
| 2023.10.04 / Step 6 [DOM_회원가입] - 코딩 62 일차 (0) | 2023.10.04 |
| 2023.09.27 / Step 6 [DOM_숫자슬라이드게임3] - 코딩 61 일차 (0) | 2023.09.27 |
| 2023.09.26 / Step 6 [DOM_숫자슬라이드게임2] - 코딩 60 일차 (0) | 2023.09.26 |