라라리라
2023.10.06 / Step 6 [DOM_달력2단계] - 코딩 64 일차 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#target {
margin: 0 auto;
display: table;
}
#header {
margin: 0 auto;
display: table;
}
#footer {
text-align: center;
}
td {
border: 1px solid black;
width: 60px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="header"><table>
<tr>
<td colspan="4" id="todayTd" onclick="reset();"></td>
</tr>
<tr>
<td id="yearTd"></td>
<td id="monthTd"></td>
<td><input type="button" value="◁" onclick="pre()"></td>
<td><input type="button" value="▷" onclick="next()"></td>
</tr>
</table></div>
<div id="target"></div>
<div id="footer"><h5>이번달 달력으로 돌아가기 = 화면상단 오늘 날짜 클릭</h5></div>
<script>
let $target =document.querySelector(`#target`);
let $table = document.createElement(`table`);
let $tr = document.createElement(`tr`);
let $td = document.createElement(`td`);
let $data = [];
let now = new Date();
let now_year = now.getFullYear();
let now_month = now.getMonth();
let now_date = now.getDate();
let now_day = now.getDay();
let dayList = [`일`, `월`, `화`, `수`, `목`, `금`, `토`];
let size = 7;
let tempyear = now_year;
let tempmonth = now_month;
function init(){
$target = document.querySelector(`#target`)
$table = document.createElement(`table`);
$table.id = `Cal`
$tr = document.createElement(`tr`);
for(let i = 0; i < size; i ++){
$td = document.createElement(`td`);
$td.innerText = dayList[i]
$tr.append($td);
}
$table.append($tr);
for(let i = 0; i < 6; i++){
$tr = document.createElement(`tr`);
$temp = [];
for(let j = 0; j < size; j++){
$td = document.createElement(`td`);
$temp.push($td);
$tr.append($td);
}
$data.push($temp)
$table.append($tr);
}
$target.append($table);
print();
}
function print(){
todayTd.innerHTML = `${now_year}년 ${now_month+1}월 ${now_date}일 ${dayList[now_day]}요일`
yearTd.innerHTML = `${tempyear}년`
monthTd.innerHTML = `${tempmonth + 1}월`
let startday = new Date(tempyear, tempmonth, 1);
let endday = new Date(tempyear, tempmonth + 1, 0);
let endDate = endday.getDate();
let startIndex = startday.getDay();
let indexY = 0;
let indexX = startIndex;
for(let i = 0; i < endDate; i++){
if(indexX >= size){
indexY++;
indexX = 0;
}
$data[indexY][indexX].innerText = i + 1;
indexX++;
}
}
function pre(){
for(let i = 0; i < 6; i++){
for(let j = 0; j < size; j++){
$data[i][j].innerText = "";
}
}
tempmonth--;
if(tempmonth == -1){
tempyear--;
tempmonth = 11
}
print();
}
function next(){
for(let i = 0; i < 6; i++){
for(let j = 0; j < size; j++){
$data[i][j].innerText = "";
}
}
tempmonth++;
if(tempmonth == 12){
tempyear++;
tempmonth = 0;
}
print();
}
function reset(){
for(let i = 0; i < 6; i++){
for(let j = 0; j < size; j++){
$data[i][j].innerText = "";
}
}
tempyear = now_year;
tempmonth = now_month;
print();
}
init();
</script>
</body>
</html>
'코딩 > 2023 JavaScript DOM' 카테고리의 다른 글
| 2023.10.11 / Step 6 [DOM_식권자판기1단계] - 코딩 66 일차 (0) | 2023.10.11 |
|---|---|
| 2023.10.10 / Step 6 [DOM_장바구니] - 코딩 65 일차 (0) | 2023.10.10 |
| 2023.10.05 / Step 6 [DOM_달력1단계] - 코딩 63 일차 (0) | 2023.10.05 |
| 2023.10.04 / Step 6 [DOM_회원가입] - 코딩 62 일차 (0) | 2023.10.04 |
| 2023.09.27 / Step 6 [DOM_숫자슬라이드게임3] - 코딩 61 일차 (0) | 2023.09.27 |