[Javascript] 간단한 D

티스토리 뷰

WEB/자바스크립트

[Javascript] 간단한 D - day 페이지

춘햄 2021. 5. 13. 12:13

자바스크립트의 Date 클래스를 활용하여 간단한 D-Day 페이지를 구성해봤다.

폰트는 구글 API 를 사용했으며, 시작일은 하드 코딩으로 자바스크립트 내에서 선언하였다.

◎d-day.css

@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');

* {
	box-sizing: border-box;
}
.container{
  width:450px;
  margin:0 auto;
  /* background:url(images/heart.png) no-repeat 5px -100px;
  background-size:500px;   */
  border:1px solid #ccc;
  border-radius:2%;
  box-shadow:2px 2px 5px #333;
}
.day1{
  padding-top:20px;
  text-align:center;  
}
.day1 h3 {
  font-size:1.2em;
  color:#666;
}
.accent{
  margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	font-family: 'Jua', sans-serif;
	font-weight:bold;
  font-size:3.5em;
  color:#222;
}
.bar {
	width:100%;
	margin:60px auto 0 auto;
	padding-left:15px;
	height:40px;	
	background:#747474;
	color:#fff;
	font-size:1.2em;
	line-height:40px;
}
.day2 {
  width:420px;
  margin:20px auto 20px auto;
}
.day2 ul {
  list-style: none;  /*리스트의 기존 스타일 삭제*/
  border-bottom:1px dashed #ccc;
  height:60px;
}
.day2 ul:last-child {
	border-bottom:none;
}
.item-title {
  float:left;
  width:160px;        
  font-weight:bold;
  font-size:1.5em;
  line-height:60px;
}
.item-date {
  float:left;
  margin-left:60px;
  font-size:1.2em;
  color:#222;
  text-align:right;
  line-height:60px;
}

◎d-day.js

var now = new Date();

var firstDay = new Date("2021-03-10");

var toNow = now.getTime(); // 밀리초 리턴

var toFirst = firstDay.getTime();

var passedTime = toNow - toFirst;

var passedDay = Math.round(passedTime/(1000*60*60*24));

document.querySelector("#accent").innerText = passedDay + "일";

calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);


function calcDate(days) {
	var future = toFirst + days * (1000*60*60*24);
	var someday = new Date(future); //밀리초를 date객체로 변환
	var year = someday.getFullYear();
	var month = someday.getMonth();
	var date = someday.getDate();
	document.querySelector("#date"+days).innerText = year + "년" + month + "월" + date + "일";
	//innerHTML => HTML 태그가 삽입될 경우
	// innerText => 태그 없이 글자만 삽입
}

◎d-day.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel = "stylesheet" href = "css/d-day.css">
</head>
<body>
	<div class = "container">
		<div class= "day1">
			<h3>우리가 만난지</h3>
			<p id = "accent" class = "accent">며칠</p>
		</div>
		<div class = "bar">
			기념일 계산
		</div>
		<div class = "day2">
			<ul>
				<li class = "item-title">100일</li>
				<li class = "item-date" id = "date100"></li>
			</ul>
			<ul>
				<li class = "item-title">200일</li>
				<li class = "item-date" id = "date200"></li>
			</ul>
			<ul>
				<li class = "item-title">1년</li>
				<li class = "item-date" id = "date365"></li>
			</ul>
			<ul>
				<li class = "item-title">500일</li>
				<li class = "item-date" id = "date500"></li>
			</ul>
		</div>
	</div>
	<script src = "js/dday-result.js"></script>
</body>
</html>

ul, li 만을 사용하여 구현할 수 있는 간단한 예제이다.

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] form 내부 태그 제어 (0)	2021.05.14
[Javascript] 이벤트 (0)	2021.05.13
[Javascript] 객체의 생성자 선언 (0)	2021.05.13
[Javascript] 객체 생성 & 활용 기초 (0)	2021.05.13
[Javascript] 글 숨기기 / 보이기 (0)	2021.05.12