[Javascript] - 카운트다운으로 남은날짜시간 구하기
○ 카운트다운으로 남은날짜시간 구하기 |
// timer.js
CountDownTimer('12/25/2019', 'countdown'); CountDownTimer('3/19/2019 5:00 PM', 'HourCountdown'); CountDownTimer('2/19/2019', 'countExpire'); function CountDownTimer(dt, id) { var end = new Date(dt); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; // 시간 종료 시 뜨는 문구 if (distance < 0) { clearInterval(timer); document.getElementById(id).innerHTML = '카운트다운이 끝났습니다. 곧 오픈합니다!'; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById(id).innerHTML = days + '일 '; document.getElementById(id).innerHTML += hours + '시간 '; document.getElementById(id).innerHTML += minutes + '분 '; document.getElementById(id).innerHTML += seconds + '초'; } timer = setInterval(showRemaining, 1000); } |
// main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타이머 테스트</title>
<script type="text/javascript" src="timer.js"></script>
<style>
#countdown,
#HourCountdown,
#countExpire {
display: inline;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
// 아래와 같이 가져와서 사용한다
2019년 12월 25일까지 <div id="countdown"></div> 남았습니다.<br>
2019년 3월 19일 5시까지 <div id="HourCountdown"></div> 남았습니다.<br>
2019년 2월 19일인 오늘 <div id="countExpire"></div>
</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 |