Javascript/연습
d-day
SEOKIHOUSE
2023. 5. 31. 12:52
이 부분 유의해서 보자!! <js>
// document.querySelector("#date" +number).innerText =
// year+"년 " +month + "월 "+date +"일 " + daysPresent[day] +"요일";
let no = document.querySelector("#date" + number);
no.innerHTML = year + "년 " + month + "월 " + date + "일 " + daysPresent[day] + "요일";
html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-Day for love</title>
<link href="css/d-day.css" rel="stylesheet">
<script src="js/d-day.js"></script>
</head>
<body>
<div class="container">
<div class="day1">
<h3>우리 만난지</h3>
<p id="accent" class="accent"><span style="font-size:0.6em; font-style:italic">며칠?</span></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>
</body>
</html>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;
font-size:1.2em;
color:#222;
text-align:right;
line-height:60px;
}javascript
window.onload = function () {
//오늘 날짜
const now = new Date();
//처음만난 날
let firstDay = new Date("2023-03-08");
// getTime()으로 오늘, 만난 날의 밀리초 구하기
let todayMil = now.getTime();
let firstMil = firstDay.getTime();
//밀리초 빼기
let calculateMil = todayMil - firstMil;
let second = calculateMil / 1000;
let minute = second / 60;
let hour = minute / 60;
let day = hour / 24;
//지난 일수 반올림 (우리 만난 날부터 몇일 지났다)
let weMetDay = Math.round(day);
document.getElementById("accent").innerText = weMetDay + "일";
// let setWeMetDay = document.getElementById("accent");
// setWeMetDay.innerHTML = weMetDay + "일";
calDate(100);
calDate(200);
calDate(365);
calDate(500);
function calDate(number) {
// 밀리세컨드 설정
let oneHundredMil = number * 24 * 60 * 60 * 1000;
//number일수 후 밀리초
let afterMil = firstMil + oneHundredMil;
// document.write(afterMil +"<br>");
const dates = new Date(afterMil);
let year = dates.getFullYear();
let month = dates.getMonth() + 1; //0월부터 가져와서 +1
let date = dates.getDate();
let daysPresent = ["일", "월", "화", "수", "목", "금", "토"];
let day = dates.getDay(); //숫자로 가져오니까 배열에서 요일을 땡겨오자
// document.querySelector("#date" +number).innerText =
// year+"년 " +month + "월 "+date +"일 " + daysPresent[day] +"요일";
let no = document.querySelector("#date" + number);
no.innerHTML = year + "년 " + month + "월 " + date + "일 " + daysPresent[day] + "요일";
// let set100Day = document.querySelector(".item-date");
// let set200Day = document.querySelector("#date200");
// let set365Day = document.querySelector("#date365");
// let set500Day = document.querySelector("#date500");
// set100Day.innerHTML = year+"년 " +month + "월 "+date +"일 " + daysPresent[day] +"요일";
};
};