기념일 계산기

imjingu·2023년 8월 7일
개발공부

목록 보기
313/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @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;
        }
        
        #som {
            padding: 10px;
        }
    </style>
</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 id="som">만난 날짜를 선택 해주세요
            <input type="date" id="some">
        </div>
        
    </div>
    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const some = document.getElementById("some") // input date 를 불러옴
            some.addEventListener('change', () => { // 이벤트 추가해줌
            const day = document.getElementById("some").value; // input date의 value값을 불러옴

            const oneDay = 1000 * 60 * 60 * 24;// 하루의 밀리초
            const firstDay = new Date(day); // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듬, input date의 value값을 넣어줌
            const now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듬
            const toNow = now.getTime(); // 오늘 날짜의 밀리초를 반환
            const toFirst = firstDay.getTime(); // 처음 만난 날의 밀리초를 반환
            const passedTime = toNow - toFirst; // 처음 만난 날과 오늘 사이의 차이 (밀리초)
            const passedDay = Math.round(passedTime / oneDay); // 밀리초를 일로 변환 후 반올림 합니다.
            document.querySelector('#accent').innerText = `${passedDay} 일`; // #accent 영역에 표시함

            const calcDate = function (days) {
                let future = toFirst + days * oneDay; // 처음 만난 날에 밀리초로 바꾼 100일을 더함
                let someday = new Date(future); // futere값을 사용해 Date 객체의 인스턴스를 만듭니다
                let year = someday.getFullYear(); // 연도를 가져옴
                let month = someday.getMonth() + 1; // 월을 가져옴
                let date = someday.getDate(); // 일을 가져옴
                document.querySelector('#date' + days).innerText = `${year}년 ${month}월 ${date}일`;
            };
            calcDate(100); // 100일 기념일을 계산해서 표시합니다
            calcDate(200); // 200일 기념일을 계산해서 표시합니다
            calcDate(365); // 1년 기념일을 계산해서 표시합니다
            calcDate(500); // 500일 기념일을 계산해서 표시합니다
            });
        });
    </script>
</body>
</html>
imjingu
이전 포스트
수강신청하기

다음 포스트
기념일 계산기

개발공부

수강신청하기

java - 반복문을 빠져 나오는 방법

0개의 댓글
