-
실습 - 책읽기 날짜 프로그램 만들기JavaScript/실습 2023. 1. 24. 13:59
나의풀이
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> div { background-color: blue; width:300px; height:300px; /* border-radius를 반드시 width와 height의 절반으로 해야한다는 점 */ border-radius: 50%; text-align:center; font-size:30px; border: solid 1px; position:relative; } #text{ position:absolute; top:70px; left:100px; } #contents{ position:absolute; bottom:100px; left: 50px; font-size:15px; } </style> </head> <body> <div> <p id="text">책읽기</p> <p id="contents"></div> <script> const date1 = new Date(2020,7,1) const date2 = new Date(2020,7,10) const lapse = date2.getTime() - date1.getTime(); const lapse_day = lapse / 1000 / 60 / 60 / 24; document.querySelector('#contents').textContent = lapse_day + "일 경과 하였습니다"; </script> </div> </body> </html>해설풀이
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> #container{ margin:auto; width:300px; height:300px; border-radius:50%; border: double 2px #222; background-color: whitesmoke; text-align:center; } h1{ margin-top:80px; } .accent { font-size: 1.8em; font-weight: bold; color:red; } </style> </head> <body> <div> <div id="container"> <h1>책 읽기</h1> <p><span class="accent" id="result"></span>일 연속으로 <br>책 읽기를 달성했군요</p> <p>축하합니다</p> </div> <script> var now = new Date('2022-10-15'); var firstDay = new Date('2022-10-01'); var toNow = now.getTime(); var toFirst = firstDay.getTime(); var passTime = toNow - toFirst; passTime = Math.round(passTime/(1000 * 60 * 60 *24)); document.querySelector('#result').innerText = passTime; </script> </div> </body> </html>'JavaScript > 실습' 카테고리의 다른 글
실습 - innerText, innerHTML 프러퍼티 (0) 2023.01.28 실습 - 클릭하고 창 닫기 (0) 2023.01.26 실습 - 클릭하면은 상세설명 나타내고, 클릭하면은 상세설명 닫기 (0) 2023.01.24 실습 - 3의배수찾기 (0) 2023.01.20 실습 - 이름클릭하면 색깔 바꾸기 (0) 2023.01.19