year(년)을 지정하면 그에 따른 캘린더(달력)가 나오도록 만들어보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const year = 2024;
const month = 4;
const startCalendar = new Date(2024, month-1, 1);
const endCalendar = new Date(2024, month, 1-1);
const startDayOfWeek = startCalendar.getDay() + 1;
const endDate = endCalendar.getDate();
const endDayOfWeek = endCalendar.getDay() + 1;
let html = '<table border="1" width="800" cellspacing="0">';
html += '<tr>';
html += '<th>일요일</th>';
html += '<th>월요일</th>';
html += '<th>화요일</th>';
html += '<th>수요일</th>';
html += '<th>목요일</th>';
html += '<th>금요일</th>';
html += '<th>토요일</th>';
html += '</tr>';
html += '<tr>';
for(let i=1; i<startDayOfWeek; i++) {
html += '<td></td>';
}
for( let i=1, n=startDayOfWeek ; i<=endDate ; i++, n++ ) {
if (n % 7 == 1) {
html += '<tr>';
}
html += '<td>' + i + '</td>';
if(n % 7 == 0) {
html += '</tr>';
}
}
for(let i=endDayOfWeek; i<=6; i++) {
html += '<td></td>';
}
html += '</tr>';
html += '</table>';
document.write(html);
</script>
</body>
</html>토요일은 파란색처리, 일요일은 빨간색 처리되고 오늘의 날짜는 대괄호([ ]) 안에 넣어지는 달력을 만들어 보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const year = 2024;
const month = 4;
const startCalendar = new Date(2024, month-1, 1);
const endCalendar = new Date(2024, month, 1-1);
const nowCalendar = new Date();
const startDayOfWeek = startCalendar.getDay() + 1;
const endDate = endCalendar.getDate();
const endDayOfWeek = endCalendar.getDay() + 1;
let html = '<table border="1" width="800" height="400" cellspacing="0">';
html += '<tr>';
html += '<th>일요일</th>';
html += '<th>월요일</th>';
html += '<th>화요일</th>';
html += '<th>수요일</th>';
html += '<th>목요일</th>';
html += '<th>금요일</th>';
html += '<th>토요일</th>';
html += '</tr>';
html += '<tr>';
for(let i=1; i<startDayOfWeek; i++) {
html += '<td></td>';
}
for (let i=1, n=startDayOfWeek; i<=endDate; i++, n++) {
if(n % 7 == 1) {
html += '<tr>';
}
if (n % 7 == 1) {
if(n == nowCalendar.getDate() + 1) {
html += '<td bgcolor="red"><b>[' + i + ']</b></td>';
} else {
html += '<td bgcolor="red">' + i + '</td>';
}
} else if (n % 7==0) {
if (n == nowCalendar.getDate() + 1) {
html += '<td bgcolor="blue"><b>[' + i + ']</b></td>';
} else {
html += '<td bgcolor="blue">' + i + '</td>';
}
} else {
if ( n == nowCalendar.getDate() + 1) {
html += '<td><b>[' + i + ']</b></td>';
} else {
html += '<td>' + i + '</td>';
}
}
if (n % 7 == 0) {
html += '</tr>';
}
}
for(let i=endDayOfWeek; i<=6; i++) {
html += '<td></td>';
}
html += '</tr>';
html += '</table>';
document.write(html);
</script>
</body>
</html>
콘솔창에도 달력을 출력할 수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
const year = 2024;
const month = 4;
const startCalendar = new Date(2024, month-1, 1); // 첫 날
const endCalendar = new Date(2024, month, 1-1); // 마지막 날
// 1 - 일요일
const startDayOfWeek = startCalendar.getDay() + 1;
// 마지막 일
const endDate = endCalendar.getDate();
const endDayOfWeek = endCalendar.getDay() + 1;
console.log( ' SU MO TU WE TH FR SA');
let strCalendar = '';
// 1일 까지의 공백
for(let i=1; i<startDayOfWeek; i++) {
strCalendar += ' '; // 3
}
for( let i=1, n=startDayOfWeek; i<=endDate; i++, n++) {
// 출력화면을 위한 처리
strCalendar += (i<10) ? ' ' + i : ' ' + i;
// 토요일마다 엔터키 입력
if ( n % 7 == 0) {
strCalendar += '\n';
}
}
console.log(strCalendar);
</script>
</body>
</html>
'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글
| [Javascript] 입력창에 검색어 입력 후 다음, 네이버, 구글에서 검색결과 보기 (0) | 2024.04.26 |
|---|---|
| [Javascript] 중복없는 로또번호 출력 (0) | 2024.04.25 |
| [Javascript] 국영수 총점과 평균 나타내는 표 만들기 (0) | 2024.04.25 |
| [Javascript] 구구단 테이블 만들기 (0) | 2024.04.25 |
| [Javascript] 표 안에 별표 찍기 (0) | 2024.04.19 |
