2021-06-15 수업 정리

49432 단어 개념 노트개념 노트

달력만들기

바디

<body>
<select id="cmbYear" onchange="changeDay()"></select>
<select id="cmbMonth" onchange="changeDay()"></select>
<select id="cmbDay"></select>
<br>
<!-- .month>ul>li*3 -->
<div class="month">
	<ul>
		<li class="prev" onclick="changeCalendar(-1)">&#10094;</li>
		<li class="next" onclick="changeCalendar(1)">&#10095;</li>
		<li>
		  <span id="month">June</span><br>
		  <span id="year" style="font-size:18px">2021</span><br>
		</li>
	</ul>
</div>
<!-- ul.weekdays>li*7 -->
<ul class="weekdays">
	<li>Su</li>
	<li>Mo</li>
	<li>Tu</li>
	<li>We</li>
	<li>Th</li>
	<li>Fr</li>
	<li>Sa</li>
</ul>
<!-- ul.days>li*31>{$} -->
<ul class="days">
<!-- 
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li><span class="active">15</span></li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
	<li>21</li>
	<li>22</li>
	<li>23</li>
	<li>24</li>
	<li>25</li>
	<li>26</li>
	<li>27</li>
	<li>28</li>
	<li>29</li>
	<li>30</li>
	<li>31</li>
-->	
</ul>
</body>

바디 태그 안의 내용은 우리가 필요한 내용이 담긴 년도 월 요일을 시각적으로 표현할 곳을 만들기 위한 작업이다

스타일태그

<style>
   select{
     width: 100px;
     text-align: center;
   }
   
   * {box-sizing: border-box;}
   ul {list-style-type: none;}
   body {font-family: Verdana, sans-serif;}
   
   .month {
	  padding: 70px 25px;
	  width: 100%;
	  background: #1abc9c;
	  text-align: center;  
	}
	
	.month ul {
	  margin: 0;
	  padding: 0;
	}
	
	.month ul li {
	  color: white;
	  font-size: 20px;
	  text-transform: uppercase;
	  letter-spacing: 3px;
	} 
	
	.month .prev {
	  float: left;
	  padding-top: 10px;
	}
	
	.month .next {
	  float: right;
	  padding-top: 10px;
	}
	
	.weekdays {
	  margin: 0;
	  padding: 10px 0;
	  background-color: #ddd;
	}
	
	.weekdays li {
	  display: inline-block;
	  width: 13.0%;
	  color: #666;
	  text-align: center; 
	} 
	
	.days {
	  padding: 10px 0;
	  background: #eee;
	  margin: 0;
	}
	
	.days li {
	  list-style-type: none;
	  display: inline-block;
	  width: 13.0%;
	  text-align: center;
	  margin-bottom: 5px;
	  font-size:12px;
	  color: #777;
	}
	
	.days li .active {
	  padding: 5px;
	  background: #1abc9c;
	  color: white !important
	}
</style>
<style>
  li.prev:hover , li.next:hover{
    cursor: pointer;
    color:red;
  }
</style>

스크립트

<script>
  var now = new Date();
  var now_year = now.getFullYear();
  var now_month = now.getMonth() + 1; 
  var now_date = now.getDate();
  
  //                  2021년    6월
  function getLastDay(year, month){
	  var d = new Date(year, month, 0);
	  return d.getDate();
  }
  
  function getDayOfWeek(year, month, day){
	  var d = new Date(year, month-1, day);
	  return d.getDay();  // 0(일) ~ 6(토)
  }
  
  var spn_year = document.querySelector("span#year");
  var spn_month = document.querySelector("span#month");
  var ul_days = document.querySelector("ul.days");
  
  spn_year.innerHTML = now_year;
  spn_month.innerHTML = now_month;
  
  //                       2021   6
  function printCalendar( year, month ){
	  var lastDay = getLastDay(year, month);
	  var dayOfWeek = getDayOfWeek(year, month, 1);
	  
	  ul_days.innerHTML = "";
	  
	  // 1일 위치 설정 - <li><li> 2개추가
	  for (var i = 1; i <= dayOfWeek ; i++) {
		var li_day = document.createElement("li");
		ul_days.appendChild(li_day);
	  }
	  
	  // <li>1</li>
	  // <li><span class="active">15</span></li>
	  for (var i = 1; i <= lastDay ; i++) {
		var li_day = document.createElement("li");
		// DOM 텍스트node(노드)
		var li_day_text = document.createTextNode( i );
		
		// 년, 월, 일 같으면 class=active span 추가
 
		if ( i == now_date 
				&&
		     parseInt(spn_year.innerHTML) == now_year 
		     &&
		     spn_month.innerHTML == now_month) {
			// <span class="active">15</span>
			var li_day_spn = document.createElement("span");
			li_day_spn.setAttribute("class", "active");
			li_day_spn.appendChild(li_day_text);
			// <li><span class="active">15</span></li>
			li_day.appendChild(li_day_spn);
		} else {
			li_day.appendChild(li_day_text);
		}
		
		ul_days.appendChild(li_day);
	  } // 
  }
  
  printCalendar(now_year, now_month);
</script>
<script>
  function changeCalendar(value){  // 1(next) , -1(prev)
	  var year =  parseInt( spn_year.innerHTML );
      var month = parseInt( spn_month.innerHTML ) + value;
      //  0   13
      if (month == 0) {
		month = 12;
		year--;
	  } else if ( month == 13){
		month = 1;
        year++;
	  }
      
      spn_year.innerHTML = year;
      spn_month.innerHTML = month;
      
      printCalendar(year, month);
  }
</script>
<script>
  var cmbYear = document.querySelector("#cmbYear");
  var cmbMonth = document.querySelector("#cmbMonth");
  var cmbDay = document.querySelector("#cmbDay");
  
  // 년도를 선택할 수 있게 1970 ~ 2050
  // 2021년 option 태그 selected = selected  ?
		  
		  // new Option(text[,value], drfaultSelected , selected)
  for (var i = 1970; i <= 2050; i++) {
	  if(i == now_year)
		  cmbYear.options[i-1970] = new Option(i,i, true, true); 
	  else 
	     cmbYear.options[i-1970] = new Option(i,i);
  }
  
  // cmbMonth 1 월~ 12월
  for (var i = 1 ; i <= 12; i++) {  
	     cmbMonth.options[i-1] = new Option(i+"월",i);
  }
  // 6월
  cmbMonth.selectedIndex = now_month - 1;
  
  function setCmbDay(year, month){
	  var lastDay = getLastDay(year, month);
	  
	  // 이전 option 제거
	  cmbDay.innerHTML = "";
	  // cmbDay.options = null;
	  // cmbDay.options.length= 0;
	  // cmbDay.length = 0;
	  
	  for (var i = 1; i <= lastDay; i++) {
		cmbDay.options[i-1] = new Option(i,i);
	  }
	  cmbDay.selectedIndex = now_date - 1;
  }
  
  setCmbDay(now_year, now_month);
</script>
<script>
  function  changeDay(){
	  var year= cmbYear.value;
	  var month= cmbMonth.value;
	  
	  setCmbDay(year, month);
	  
	  // 
	  printCalendar(year, month); 
	  spn_year.innerHTML = year;
	  spn_month.innerHTML = month;
  }
</script>

function getLastDay(year, month){ - 매개변수로 년도와 월을 받아 그날의 마지막 일을 구해오는 함수
var d = new Date(year, month, 0);
return d.getDate();
}

function getDayOfWeek(year, month, day){ - 매개변수로 년도 월 일을 받아 그일자의 요일을 구해오는 함수
var d = new Date(year, month-1, day);
return d.getDay(); // 0(일) ~ 6(토)
}

function printCalendar( year, month ){ -달력을 그리는 함수
var lastDay = getLastDay(year, month); - 마지막 일자
var dayOfWeek = getDayOfWeek(year, month, 1); - 1일의 요일

  ul_days.innerHTML = "";  -- 시작시 초기화
  
  // 1일 위치 설정 - <li><li> 2개추가
  for (var i = 1; i <= dayOfWeek ; i++) { 수요일이면 일 월 화 만큼의 for문을 돌려 위치를 옮긴다
	var li_day = document.createElement("li");
	ul_days.appendChild(li_day);
  } --1일 위치를 뒤로 미루는 for문
  
  // <li>1</li>
  // <li><span class="active">15</span></li>
  for (var i = 1; i <= lastDay ; i++) {
	var li_day = document.createElement("li");
	// DOM 텍스트node(노드)
	var li_day_text = document.createTextNode( i );
	
	// 년, 월, 일 같으면 class=active span 추가

	if ( i == now_date 
			&&
	     parseInt(spn_year.innerHTML) == now_year 
	     &&
	     spn_month.innerHTML == now_month) { active를 추가하는 코딩
		// <span class="active">15</span>
		var li_day_spn = document.createElement("span");
		li_day_spn.setAttribute("class", "active");
		li_day_spn.appendChild(li_day_text);
		// <li><span class="active">15</span></li>
		li_day.appendChild(li_day_spn);
	} else {
		li_day.appendChild(li_day_text);
	}
	
	ul_days.appendChild(li_day);
  } //

}

function changeDay(){ 옆의 화살표를 누르면 월이 바뀌는 함수
var year= cmbYear.value;
var month= cmbMonth.value;

  setCmbDay(year, month);
  
  // 
  printCalendar(year, month); 
  spn_year.innerHTML = year;
  spn_month.innerHTML = month;

}

for (var i = 1970; i <= 2050; i++) {
  if(i == now_year)
	  cmbYear.options[i-1970] = new Option(i,i, true, true); 
  else 
     cmbYear.options[i-1970] = new Option(i,i);

} -- option에 년도를 추가

// cmbMonth 1 월~ 12월
for (var i = 1 ; i <= 12; i++) {
cmbMonth.options[i-1] = new Option(i+"월",i);
} -- 월에 12월까지를 추가
// 6월
cmbMonth.selectedIndex = now_month - 1;

function setCmbDay(year, month){ --select 안의 option을 월의 날만큼 계속 바꿔주는 함수
var lastDay = getLastDay(year, month);

  // 이전 option 제거
  cmbDay.innerHTML = "";
  // cmbDay.options = null;
  // cmbDay.options.length= 0;
  // cmbDay.length = 0;
  
  for (var i = 1; i <= lastDay; i++) {
	cmbDay.options[i-1] = new Option(i,i);
  }
  cmbDay.selectedIndex = now_date - 1;

}

나온 결과화면:

Algorithm/programmers/정렬/level1/K번째 수 (with python)
[BOJ]15652 N과 M(4).java

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage