본문 바로가기
대학교 1-1/인프

웹페이지 종강 과제2

Launa 2023. 6. 15. 21:17

천문 달력의 메인인 달력 부분이다.

사실 달력 만들기 쉬울줄 알고 덤볐는데 너무 어려웠다.

웹페이지 만드는데 16시간정도 들인거같은데 그중에 3시간 이상을 달력 코드찾는데 쓴것같다.

천문 달력이라 함은 달력에 천문 현상이 들어가 있어야 하는데 나는 시간이 없어서 6월달 7월달 일정만 넣었다.

남은 달 일정도 넣어볼까 했지만 귀찮아서 던졌다.(사실 이떄쯤 시간이 없었다)

모든 천문현상 출처는 내가 가지고 있던 한국천문 연구원의 천문력이다.

<html>

<!DOCTYPE html>
<html lang="ko">
<style>
  table {
    width: 800px;
    height: 700px;
    border: 1px solid #444444;
    border-collapse: collapse;
    }
</style>
    
<script language="javascript">
  var today = new Date(); //오늘 날짜        
  var date = new Date();
  
  //이전달
  function beforem() //이전 달을 today에 값을 저장
  { 
    today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
    autoReload(); //만들기
  }
  
  //다음달
  function nextm()  //다음 달을 today에 저장
  {
    today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
    autoReload();
  }
  
  //오늘선택
  function thisMonth(){
    today = new Date();
    autoReload();
  }

  function autoReload()
  {
    var nMonth = new Date(today.getFullYear(), today.getMonth(), 1); //현재달의 첫째 날
    var lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0); //현재 달의 마지막 날
    var tbcal = document.getElementById("calendar"); // 테이블 달력을 만들 테이블
    var yearmonth = document.getElementById("yearmonth"); //  년도와 월 출력할곳
    yearmonth.innerHTML = today.getFullYear() + "년 "+ (today.getMonth() + 1) + "월"; //년도와 월 출력

    if(today.getMonth()+1==12) //  눌렀을 때 월이 넘어가는 곳
    {
      before.innerHTML=("<"+today.getMonth())+"월";
      next.innerHTML="1월"+">";
      
    }
    else if(today.getMonth()+1==1) //  1월 일 때
    {
      before.innerHTML="<"+"12월";
      next.innerHTML=(today.getMonth()+2)+"월" +">";
    }
    else //   12월 일 때
    {
      before.innerHTML="<"+(today.getMonth())+"월";
      next.innerHTML=(today.getMonth()+2)+"월"+">";
    }


    // 남은 테이블 줄 삭제
    while (tbcal.rows.length > 2) 
    {
      tbcal.deleteRow(tbcal.rows.length - 1);
    }
    var row = null;
    row = tbcal.insertRow();
    var cnt = 0;
    var dayCheck = (nMonth.getDay()==0) ? 7 : nMonth.getDay(); //일요일을 마지막으로 넣기 위해서.

     // 1일 시작칸 찾기
    for (i = 0; i < (dayCheck-1); i++) 
    {
      cnt = cnt + 1;  //요일값
      cell = row.insertCell();
      
      if (i>4) { //주말
        cell.style.backgroundColor = "#f7f7f7";
      }
    }


    // 달력 출력
    for (i = 1; i <= lastDate.getDate(); i++) // 1일부터 마지막 일까지
    { 
      cell = row.insertCell();
      
      var str="";
      
      str += "<div>"+i+"</div>";
      var day = (i<10) ? "0"+i : i;             
      str += "<div id='"+day+"'></div>"; //나중에 원하는 날에 일정을 넣기위해 id값을 날자로 설정
      cell.innerHTML = str;
      
      cnt = cnt + 1;
      if (cnt % 7 == 6) {//토요일
        var str="";
        str += "<div>"+i+"</div>";
        var day = (i<10) ? "0"+i : i;             
        str += "<div id='"+day+"'>";
        str += "</div>";
        cell.innerHTML = str;
        cell.style.color = "#009de0";                   
      }
      if (cnt % 7 == 0) { //일요일
        var str="";
        str += "<div>"+i+"</div>";
        var day = (i<10) ? "0"+i : i;             
        str += "<div id='"+day+"'>";
        str += "</div>";
        cell.innerHTML = str;
        row = calendar.insertRow();// 줄 추가
        cell.style.color = "#ed5353";
      }
      
      //마지막 날짜가 지나면 일요일까지 칸 그리기
      if(lastDate.getDate() == i && ((cnt % 7) != 0)){
        var add = 7 - (cnt % 7);
        for(var k = 1; k <= add; k++){
          cell = row.insertCell();
          cnt = cnt + 1;
          if (cnt % 7 == 6) {//토요일
            cell.style.backgroundColor = "#ffffff";
          }
          if (cnt % 7 == 0) { //일요일
            cell.style.backgroundColor = "#ffffff";
          }
        }
      }
      
      //오늘날짜배경색
      if( today.getFullYear() == date.getFullYear() && today.getMonth() == date.getMonth() && i==date.getDate() )
      {
        cell.style.backgroundColor = "#E6E6E6"; //오늘날짜배경색
      }
      
      //마지막 날짜가 지나면 일요일까지 칸 그리기
      if(lastDate.getDate() == i && ((cnt % 7) != 0)){
        var add = 7 - (cnt % 7);
        for(var k = 1; k <= add; k++){
          cell = row.insertCell();
          cnt = cnt + 1;
          if (cnt % 7 == 6) {//토요일
            cell.style.backgroundColor = "#f7f7f7";
          }
          if (cnt % 7 == 0) { //일요일
            cell.style.backgroundColor = "#f7f7f7";
          }
        }
      }
      





      // 6월에 현충일 출력
      if (today.getMonth() + 1 == 6 && i == 2) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>20:00 화성과 벌집성단의 근접 ";
        /*str += "<br>12:00 일정2 \n";*/
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 4) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>12:42 망";
        str += "<br><font color='black'>20:00 금성의 동방최대이각 \n";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 7) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>08:07 달의 근지점 ";
        /*str += "<br>12:00 일정2 \n";*/
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 6 && i == 11) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>04:31 하현달 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 13) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>20:05 금성과 벌집성단의 근접 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 6 && i == 17) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>05:18 수성과 알데바란의 근접 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 6 && i == 18) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>13:37 합삭";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 19) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>00:00 토성 유(동-서)";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 21) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>19:38 달과 벌집성단의 근접";
        str += "<br><font color='black'>23:58 하지 \n";
        document.getElementById(tdId).innerHTML = str;
      }
        if (today.getMonth() + 1 == 6 && i == 22) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>19:09 달과 화성의 근접";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 23) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>03:31 달의 원저점";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 6 && i == 26) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>16:50 상현달";
        document.getElementById(tdId).innerHTML = str;
      }




      if (today.getMonth() + 1 == 7 && i == 1) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>14:00 수성의 외합 ";
        str += "<br><font color='black'>22:00 해왕성 유(동-서)";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 3) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>20:39 망 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 5) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>07:28 달의 근지점 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 7) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>05:00 지구의 원일점 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 7 && i == 8) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>05:00 금성 최대 빛나는 면적 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 7 && i == 10) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>10:48 하현달 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 7 && i == 12) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>06:18 달과 목성의 근접 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 18) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>03:32 합삭 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 20) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>15:56 달의 원지점 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 21) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>15:56 금성 유(동-서) ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 26) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>07:07 상현달 ";
        document.getElementById(tdId).innerHTML = str;
      }
      if (today.getMonth() + 1 == 7 && i == 27) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>20:00 수성과 금성의 근접 ";
        document.getElementById(tdId).innerHTML = str;
      }
       if (today.getMonth() + 1 == 7 && i == 29) {
        var tdId = (i < 10) ? "0" + i : i;
        var str = "";
        str += "<br><font color='black'>00:35 물병자리 델타 유성우 극대 ";
        str += "<br><font color='black'>02:11 달과 안타레스의 근접 ";
        str += "<br><font color='black'>03:21 수성과 레굴루스의 근접 ";
        document.getElementById(tdId).innerHTML = str;
      }


      
    }
  }
</script>
<body onload="autoReload();">
  <table align="center" id="calendar">
    <tr>
      <td colspan="2"align="center">
        <a id="before" href="javascript:beforem()"></a>
      </td>
      <td colspan="3" align="center">
        <div id="yearmonth"></div>
      </td>
      <td colspan="2" align="center">
        <a id="next" href="javascript:nextm()"></a>
      </td>

    </tr>
    <tr>
      <td width="14%"> 월 </td>
      <td width="14%"> 화 </td>
      <td width="14%"> 수 </td>
      <td width="14%"> 목 </td>
      <td width="14%"> 금 </td>
      <td width="14%"><font color="#009de0">토</font></td>
      <td width="14%"><font color="#ed5353">일</font></td>
    </tr>
  </table>
</body>
</html>

<css>

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.calendar {
  width: 600px;
  margin: 50px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.year-month {
  font-size: 35px;
}

.nav {
  display: flex;
  border: 1px solid #333333;
  border-radius: 5px;
}

.nav-btn {
  width: 28px;
  height: 30px;
  border: none;
  font-size: 16px;
  line-height: 34px;
  background-color: transparent;
  cursor: pointer;
}

.go-today {
  width: 75px;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
}

.days {
  display: flex;
  margin: 25px 0 10px;
}

.day {
  width: calc(100% / 7);
  text-align: center;
}

.dates {
  display: flex;
  flex-flow: row wrap;
  height: 500px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
}

.date {
  width: calc(100% / 7);
  padding: 15px;
  text-align: right;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

.day:nth-child(7n + 1),
.date:nth-child(7n + 1) {
  color: #D13E3E;
}

.day:nth-child(7n),
.date:nth-child(7n) {
  color: #396EE2;
}

.other {
  opacity: 0.3;
}

.today {
  position: relative;
  color: #FFFFFF;
}

.today::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 30px;
  height: 30px;
  display: block;
  background-color: #FF0000;
  border-radius: 50%;
  content: '';
}

<javascript>

 

let date = new Date();

const renderCalender = () => {
  const viewYear = date.getFullYear();
  const viewMonth = date.getMonth();

  document.querySelector('.year-month').textContent = `${viewYear}년 ${viewMonth + 1}월`;

  const prevLast = new Date(viewYear, viewMonth, 0);
  const thisLast = new Date(viewYear, viewMonth + 1, 0);

  const PLDate = prevLast.getDate();
  const PLDay = prevLast.getDay();

  const TLDate = thisLast.getDate();
  const TLDay = thisLast.getDay();

  const prevDates = [];
  const thisDates = [...Array(TLDate + 1).keys()].slice(1);
  const nextDates = [];

  if (PLDay !== 6) {
    for (let i = 0; i < PLDay + 1; i++) {
      prevDates.unshift(PLDate - i);
    }
  }

  for (let i = 1; i < 7 - TLDay; i++) {
    nextDates.push(i);
  }

  const dates = prevDates.concat(thisDates, nextDates);
  const firstDateIndex = dates.indexOf(1);
  const lastDateIndex = dates.lastIndexOf(TLDate);

  dates.forEach((date, i) => {
    const condition = i >= firstDateIndex && i < lastDateIndex + 1
                      ? 'this'
                      : 'other';
    dates[i] = `<div class="date"><span class=${condition}>${date}</span></div>`;
  });

  document.querySelector('.dates').innerHTML = dates.join('');

  const today = new Date();
  if (viewMonth === today.getMonth() && viewYear === today.getFullYear()) {
    for (let date of document.querySelectorAll('.this')) {
      if (+date.innerText === today.getDate()) {
        date.classList.add('today');
        break;
      }
    }
  }
};

renderCalender();

const prevMonth = () => {
  date.setMonth(date.getMonth() - 1);
  renderCalender();
};

const nextMonth = () => {
  date.setMonth(date.getMonth() + 1);
  renderCalender();
};

const goToday = () => {
  date = new Date();
  renderCalender();
};

사실 만들다가 엎어진 달력 후보군이 많아서 저 html코드랑 맞는 css랑 자바스크립트가 확실한지 모르겠다.(5번 엎었다)

'대학교 1-1 > 인프' 카테고리의 다른 글

작동되는 웹페이지의 모습  (0) 2023.06.15
웹페이지 종강 과제5  (0) 2023.06.15
웹페이지 종강 과제4  (0) 2023.06.15
웹페이지 종강 과제3  (0) 2023.06.15
웹페이지 종강 과제1  (0) 2023.06.15

'대학교 1-1/인프' Related Articles

티스토리툴바