Techit 블록체인 스쿨 3기 Today I Learned
visbug: 크롬 익스텐더(웹 페이지 아이템 간격 보기)
js를 사용해서 웹페이지 시계 만들기, 명언 문구 추가 기능 구현
<body> <main> <div class="time">time</div> <div class="quotes"> <div class="quotesMsg">quotes</div> <button class="quotesAddBtn" onclick="onClickAdd()">명언 추가하기</button> </div> <div class="newQuotes"> <input class="newQuotesInput" type="text/"> <button class="newQuotesButton" onclick="onClickRegist()">등록</button> </div> </main> <video class="bgVideo" src="./images/background.mp4" autoplay muted loop> </body> <script src="main.js"></script><style> body { margin: 0; background-color: lightgray; color: rgb(36, 34, 34); main { position: fixed; z-index: 2; width: 100vw; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; .time { border-bottom: 2px solid white; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font-size: 100px; font-weight: bold; -webkit-text-stroke: 2px white; color: transparent; &:hover { color: rgb(247, 205, 152); } } .quotes { position: relative; font-size: 60px; .quotesMsg { color: white; } .quotesAddBtn { display: none; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); background-color: lightcoral; width: 100px; border: 1px solid lightcoral; border-radius: 20px; color: white; cursor: pointer; } &:hover { .quotesAddBtn { display: inline-block; } } } .newQuotes { display: none; } } .bgVideo { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; object-fit: cover; opacity: 0.8; } } </style><script> function getTime() { const time = document.querySelector(".time"); const newDate = new Date(); const hour = String(newDate.getHours()).padStart(2, 0); const minutes = String(newDate.getMinutes()).padStart(2, 0); const seconds = String(newDate.getSeconds()).padStart(2, 0); //padStart -> 두 글 자가 아니면 0을 붙여라 // if (seconds.toString().length === 1) { // seconds = "0" + seconds; // } // time.innerText = hour + ":" + minutes + ":" + seconds; time.innerText = `${hour}:${minutes}:${seconds}`; } // setInterval(() => { // getTime(); // }, 1000); setInterval(getTime, 1000); const QUOTES = "quotes"; function getQuotes() { let savedQuotes = localStorage.getItem(QUOTES); const quotesMsg = document.querySelector(".quotesMsg"); if (!savedQuotes) { localStorage.setItem(QUOTES, JSON.stringify(["블", "체", "스"])); savedQuotes = localStorage.getItem(QUOTES); } let quotesArray = JSON.parse(savedQuotes); quotesMsg.innerText = quotesArray[Math.floor(Math.random() * quotesArray.length)]; } getQuotes(); function onClickAdd() { const newQuotes = document.querySelector(".newQuotes"); newQuotes.style.display = "inline-block"; } function onClickRegist() { const newQuotes = document.querySelector(".newQuotes"); const newQuotesInput = document.querySelector(".newQuotesInput"); const quotesMsg = document.querySelector(".quotesMsg"); if (!newQuotesInput.value) { alert("내용을 입력해주세요"); return; } let savedQuotes = localStorage.getItem(QUOTES); let quotesArray = JSON.parse(savedQuotes); quotesArray.push(newQuotesInput.value); localStorage.setItem(QUOTES, JSON.stringify(quotesArray)); quotesMsg.innerText = newQuotesInput.value; newQuotes.style.display = "none"; } </script>
