[Javascript] - 카운트다운 타이머에 디자인 입히기
○ 카운트다운 타이머에 디자인 입히기 |
디자인 출처 : https://codepen.io/mattlitzinger/pen/ysowF 자바스크립트 코드 출처 : https://www.w3schools.com/howto/howto_js_countdown.asp // timer.js // Set the date we're counting down to var countDownDate = new Date("March 15, 2019 15:30:00").getTime(); var countdown = document.getElementById("tiles"); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime();
// Find the distance between now and the count down date var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// HTML쪽으로 변수로 가져와서 사용하는 부분! countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; // 각각의 변수 id로 원하는 것만 가져와서 사용할 수 있다 // document.getElementById("days").innerHTML = days; // document.getElementById("hours").innerHTML = hours; // document.getElementById("minutes").innerHTML = minutes; // document.getElementById("seconds").innerHTML = seconds;
// If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); // timer.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>타이머 테스트</title> <link rel="stylesheet" href="timer.css"> </head> <body> <div id="countdown"> <div id='tiles'></div> <div class="labels"> <li>Days</li> <li>Hours</li> <li>Mins</li> <li>Secs</li> </div> </div> <script type="text/javascript" src="timer.js"></script> </body> </html> |
'NodeJS' 카테고리의 다른 글
| [Javascript] - 카운트다운으로 남은날짜시간 구하기 (0) | 2019.02.19 |
|---|---|
| [NodeJS] - 게시판 상세페이지 MySQL 연동하여 출력하기 (0) | 2018.12.25 |
| [NodeJS] - Visual Studio Code(VSC) 코드 들여쓰기 단축기 (0) | 2018.12.16 |
| [NodeJS] - MySQL 연동해서 데이터 출력 시 줄바꿈 방법 (0) | 2018.12.04 |
| [NodeJS] - MySQL 연동하기(Connection Pool), delete문 (0) | 2018.12.03 |