1. 디지털 시계 구현
2. 달력 구현
3. 날짜 구현
4. 날짜 클릭시 달력 팝업창으로 표기
style
<style>
body {
font-family: Arial, sans-serif;
}
#popupButton {
padding: 10px 20px;
font-size: 16px;
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
#closeButton {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 8px;
min-height: 50px;
}
th {
background-color: #f2f2f2;
}
.bold {
font-weight: bold;
}
.red-text {
color: red;
}
</style>
popup 을 위한 style
.popup class 초기 display 를 none으로해둠. 이후 팝업창 띄울때 display 를 flex로 바꾸어 표기시킨다.
body
<h1 id="date"></h1> 날짜를 클릭하세요.
<h1>시계</h1>
<h1 id="clock"></h1>
<!-- style 이용하여 처음엔 display none, 클릭시 flex 로 표기(반응형으로 가운데 위치) 팝업에 집중시키기위해 background color 사용 -->
<div id="popup" class="popup">
<div class="popup-content">
<h1>달력</h1>
<table id="calander">
<tbody>
<tr>
<th id="prevMonth">◀</th>
<th colspan="5"></th>
<th id="nextMonth">▶</th>
</tr>
<tr class="bold">
<th class="red-text">일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th class="red-text">토</th>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
<tr>
<td class="red-text"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="red-text"></td>
</tr>
</tbody>
</table>
<button id="closeButton">Close</button>
</div>
</div>
<!-- popup 효과 띄우려고 div 추가했음. 제외하여도됨.. -->
script
1. 공통함수 및 함수에 사용할 초기 값 선언
// 숫자가 5일 경우 시계나 달력에 05 로 표기하기위해 앞에 0을 붙이는 함수
var modifyNumber = time =>{
if(parseInt(time)<10){
return "0"+time;
}else{
return time;
}
}
var dateInfo = new Date();
var year = dateInfo.getFullYear();
// January => 0 이라서 +1 필요
var month = dateInfo.getMonth() + 1;
2. 시계 구현
var setClock = () =>{
let dateInfo = new Date();
let year = dateInfo.getFullYear();
// January => 0 이라서 +1 필요
let month = dateInfo.getMonth() + 1;
let hour = dateInfo.getHours();
if(hour<13){
hour = "오전 "+ modifyNumber(hour);
}else{
hour = "오후 "+ modifyNumber(hour-12);
}
let min = modifyNumber(dateInfo.getMinutes());
let sec = modifyNumber(dateInfo.getSeconds());
document.getElementById("clock").innerHTML = hour + ":" + min + ":" + sec;
let date = modifyNumber(dateInfo.getDate());
document.getElementById("date").innerHTML = year + "-" + modifyNumber(month) + "-" + date;
}
window.onload = function(){
setClock();
setInterval(setClock,1000);
}
3. 날짜 클릭시 팝업표현을 위한 클릭 이벤트
document.getElementById("date").addEventListener('click', event =>{
document.getElementById('popup').style.display = 'flex';
// alert("test");
});
document.getElementById("closeButton").addEventListener('click', event =>{
document.getElementById('popup').style.display = 'none';
// alert("test");
});
4. 달력 구현하기
const table = document.getElementById('calander');
//달력 그리기 함수
var loadCalander = (year, month) => {
//해당 달 정보
const monthInfo = table.rows[0];
monthInfo.cells[1].textContent = year + "년 " + modifyNumber(month) + "월";
const thirdRow = table.rows[2];
const cell = thirdRow.cells[2];
//시작일
let monthStartDay = new Date(year, month -1, 1).getDay();
//한달에 며칠이 있는지
let daysInMonth = new Date(year, month, 0).getDate();
console.log(daysInMonth);
console.log(monthStartDay);
console.log(new Date(year, month, 1));
let day = 1;
for(let i = 2 ; i < 8 ; i++){
for(let j = 0 ; j < 7 ; j++){
if(i === 2 && j < monthStartDay){
table.rows[i].cells[j].textContent = " ";
}else{
table.rows[i].cells[j].textContent = day;
day++;
}
if(daysInMonth+1 < day){
table.rows[i].cells[j].textContent = " ";
}
}
}
}
//DOM 로드 후 달력 그리기 (display=none 으로 바로 표시되지 않음)
document.addEventListener('DOMContentLoaded', function() {
loadCalander(year, month);
});
5. 달력 이전달, 전달 그리기
document.getElementById("prevMonth").addEventListener('click', event =>{
let parts = table.rows[0].cells[1].textContent.split('년 ');
let curYear = parts[0];
let curMonth = parseInt(parts[1].slice(0, -1)) - 1;
if(curMonth <= 0){
curYear--;
curMonth = 12;
}
if(curYear == 0){
curYear = 0;
curMonth = 0;
}
loadCalander(curYear, curMonth)
});
document.getElementById("nextMonth").addEventListener('click', event =>{
let parts = table.rows[0].cells[1].textContent.split('년 ');
// let parts = text.split('년 ');
let curYear = parts[0];
let curMonth = parseInt(parts[1].slice(0, -1)) + 1;
if(curMonth >= 13){
curYear++;
curMonth = 1;
}
loadCalander(curYear, curMonth)
});
curMonth 를 이용하여 값 표시.
Along with the whole thing which appears to be building inside this subject material, many of your perspectives are relatively radical. Nevertheless, I appologize, but I can not subscribe to your whole suggestion, all be it stimulating none the less. It would seem to everybody that your remarks are actually not entirely justified and in reality you are generally your self not thoroughly convinced of the point. In any event I did enjoy examining it.
Simply wanna tell that this is very helpful, Thanks for taking your time to write this.