<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>날짜 계산하는 프로그램 만들기 </title>
<style>
#container {
margin:50px auto;
width:300px;
height:300px;
border-radius:50%;
border:2px double #222;
background-color:#d8f0fc;
text-align:center;
}
h1 {
margin-top :80px;
}
.accent {
font-size:1.8em;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div id="container">
<h1>책 읽기</h1>
<p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
<p>축하합니다.!</p>
</div>
<script>
var now = new Date("2023-04-11"); //오늘 날짜를 객체로 지정
var firstDay = new Date("2023-03-20"); // 시작날짜를 객체로 지정
var toNow = now.getTime(); //오늘까지 지난 시간(밀리초)
var toFirst = firstDay.getTime(); //첫날까지 지난 시간(밀리초)
var passedTime = toNow - toFirst; //첫날부터 오늘까지 지난 시간(밀리초)
passedTime = Math.round(passedTime/(1000*60*60*24)); //밀리초를 일수로 계산하고 반올림
document.querySelector('#result').innerText=passedTime;
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 16장 예제 - 브라우저와 관련된 객체 (1) (0) | 2023.04.11 |
|---|---|
| 16장 실습 2 (0) | 2023.04.11 |
| 16장 예제 - Array 객체 (2) Array 객체의 메서드 (0) | 2023.04.11 |
| 16장 예제 - Array 객체 (1) (0) | 2023.04.11 |
| 16장 예제 - Date 객체 인스턴스 만들기/ 로컬 형식으로 현재 시각 표시하기 (0) | 2023.04.11 |
