22'C 흐림
서울 강남구
countDown.js는 복고풍으로 보이는 플립 시계처럼 카운트다운 또는 카운트업 타이머를 생성하기 위한 종속성 없는 JavaScript 라이브러리입니다.
카운트다운 시계를 배치할 컨테이너 요소를 만듭니다.
<div class="container"></div>
JavaScript 파일 'countDown.js'를 다운로드하여 웹페이지 하단에 배치하세요.
<script src="countDown.js"></script>
countDown.js를 초기화하고 계산하려는 종료 날짜를 지정합니다.
var cd = new Countdown({ cont: document.querySelector('.container'), endDate: 1553468400000, outputTranslation: { year: 'Years', week: 'Weeks', day: 'Days', hour: 'Hours', minute: 'Minutes', second: 'Seconds', }, endCallback: null, outputFormat: 'week|day|hour|minute|second', });
CSS에서 카운트다운 시계 스타일을 지정합니다.
.countDown_cont { font-family: Lato, Arial, Gadget, sans-serif; font-size: 13px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #333; } .countDown_interval_cont { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: auto; } .countDown_interval_cont:nth-child(n+1):not(:last-child) { margin-right: 1em; } .countDown_interval_basic_cont { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .countDown_interval_basic_cont_description { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: .3em; margin-top: 0.3em; font-size: 1.2em; font-weight: bold; color: white; text-shadow: 0.1em 0.1em 0.1em #000000; } .countDown_digit_cont { -webkit-perspective: 3.2em; perspective: 3.2em; box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2); width: 1em; height: 1.6em; position: relative; line-height: 1.6em; font-size: 5em; font-weight: bold; border-radius: 0.08em; } .countDown_digit_cont:nth-child(n+1):not(:last-child) { margin-right: 0.05em; } .countDown_digit_last_placeholder, .countDown_digit_new_placeholder { position: absolute; left: 0; width: 100%; height: 50%; text-align: center; overflow: hidden; } .countDown_digit_last_placeholder { bottom: 0; background: white; border-radius: 0 0 0.08em 0.08em; } .countDown_digit_last_placeholder_inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: 50%; position: absolute; } .countDown_digit_new_placeholder { top: 0; background: #f7f7f7; border-radius: 0.08em 0.08em 0 0; } .countDown_digit_last_rotate, .countDown_digit_new_rotate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 50%; font-weight: bold; position: absolute; top: 0; overflow: hidden; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: linear; animation-timing-function: linear; border-radius: 0.08em 0.08em 0 0; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .countDown_digit_last_rotate:after, .countDown_digit_new_rotate:after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 100%; border-bottom: 0.01em solid rgba(0, 0, 0, 0.1); } .countDown_digit_last_rotate { -webkit-animation-name: countDown_flip_1; animation-name: countDown_flip_1; background: #f7f7f7; } .countDown_digit_new_rotate { -webkit-animation-name: countDown_flip_2; animation-name: countDown_flip_2; background: white; } .countDown_digit_new_rotated { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); width: 100%; height: 100%; } .countDown_digit_new_rotated_inner { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; bottom: 50%; position: absolute; } @-webkit-keyframes countDown_flip_1 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 1; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 0; } } @keyframes countDown_flip_1 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 1; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 0; } } @-webkit-keyframes countDown_flip_2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 0; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 1; } } @keyframes countDown_flip_2 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 0; } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); z-index: 1; } }
Default configuration options.
var cd = new Countdown({ cont: null, countdown: true, endDate: { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 }, endCallback: null, outputFormat: 'year|week|day|hour|minute|second', outputTranslation: { year: 'Years', week: 'Weeks', day: 'Days', hour: 'Hours', minute: 'Minutes', second: 'Seconds', } });