-
연도와 월 입력하여 달력 출력하기웹 Web/HTML & CSS & Javascript 2023. 2. 7. 20:02
<시간시작> 현재의 시, 분, 초를 알려줌 (시간 계속 움직임)
<시간멈춤> 시간 출력을 현재 시각에서 멈춤
<달력작성> 입력한 연도와 월의 달력 출력
quiz.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Quiz</title> <link href="../css/style.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="../js/solution.js"> </script> </head> <body> <h1>Calendar 및 시간표시</h1> <input type="text" value="2023" id="year">년 <select id="index"> <option>월 선택 <option value='1'>1월 <option value='2' selected>2월 <option value='3'>3월 <option value='4'>4월 <option value='5'>5월 <option value='6'>6월 <option value='7'>7월 <option value='8'>8월 <option value='9'>9월 <option value='10'>10월 <option value='11'>11월 <option value='12'>12월 </select> <input type="button" value="달력작성" onclick="makeCalendar(year.value, index.value)"><br> <input type="button" value="시간시작" onclick="displayTime()" class='btn'> <input type="button" value="시간멈춤" onclick="stopTime()" class='btn'> <br><br> <span id="time"></span> <span id="calendar"></span> <span id="test"></span> </body> </html>solution.js
var clock; /* 시간시작 */ function displayTime(){ // 1초 마다 현재시간을 갱신하는 코드 clock = setInterval(function(){ // time 번수에 저적한 값 할당하는 코드 작성 let time = document.getElementById('time'); let date = new Date().toLocaleTimeString(); time.innerHTML = date; }, 1000); } /* 시간멈춤 */ function stopTime() { clearInterval(clock); } /* 달력작성 */ function makeCalendar(year, index) { let today = new Date(year, index-1, 1); let lastDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 윤년 확인 if(year%400 == 0 || (year%4==0 && year%100!=0)) { lastDays[1] = 29; } let lastDay = lastDays[index-1]; let days = []; let frontBlanks = today.getDay(); // 요일을 숫자로 리턴 let backBlanks = 7 - ((lastDay+frontBlanks)%7); let cal = "<table border=1><tr><td class='sun'>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td class='sat'>토</td></tr>"; // 배열에 앞 빈칸 넣기 for(let i = 0; i < frontBlanks ; i++) { days.push(" "); } // 배열에 날짜 + 뒤 빈칸 넣기 for(let i = 1; i <= (lastDay + backBlanks); i++) { if(i > lastDay) { days.push(" "); } else { days.push(i); } } // 달력 찍기 for(let i = 1; i <= days.length; i++) { if(i%7 == 0) { cal += "<td class='sat'>" + days[i-1] + "</td></tr>"; } else if(i%7 == 1) { cal += "<tr><td class='sun'>" + days[i-1] + "</td>"; } else { cal += "<td>" + days[i-1] + "</td>"; } } cal += "</table>"; calendar = document.getElementById("calendar"); calendar.innerHTML = cal; }style.css
@charset "UTF-8"; table { border-collapse: collapse; text-align: center; } .sun { color: red; } .sat { color: blue; }'웹 Web > HTML & CSS & Javascript' 카테고리의 다른 글
[Ajax] 비동기 처리 - call back 함수 (0) 2023.03.20 HTML파일에서 외부 CSS, JS파일 불러오기 (0) 2023.02.03 DOM, Document (0) 2023.02.02 기초 코드3 - form태그 (0) 2022.01.12 기초 코드2 - 이미지, 링크 (0) 2022.01.12