jQuery : jQuery.countdown 카운트 다운 count down 라이브러리
jQuery.countdown 카운트 다운 count down 라이브러리
CIO’s Future of Cloud Summit November 8, 2022 사이트에 카운트 다운 부분이 보여서 코드를 봤더니 http://hilios.github.io/jQuery.countdown/ 사이트에서 운영하는 라이브러리를 사용하는것을 발견하여 이를 조사해 봤습니다.
http://hilios.github.io/jQuery.countdown/ 에서 운영하는 샘플 예제가 상당히 많고 활용도가 높습니다.
이를 사용하고 한다면, jQuery 라이브러리를 참조하여, 아래와 같이 format 형태를 요청하면 그에 맞게 카운팅을 해서 보여줍니다.!!
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.countdown.min.js"></script>
</head>
<body>
<div class="example-base">
Limited Time Only!
<span id="clock"></span>
</div>
</body>
<script type="text/javascript">
$('#clock').countdown('2022/11/23 01:00:00').on('update.countdown', function(event) {
var format = '%H:%M:%S';
if(event.offset.totalDays > 0) {
format = '%-d day%!d ' + format;
}
if(event.offset.weeks > 0) {
format = '%-w week%!w ' + format;
}
$(this).html(event.strftime(format));
}
).on('finish.countdown', function(event) {
$(this).html('This offer has expired!')
.parent().addClass('disabled');
});
</script>
</html>
다양한 예제들
http://hilios.github.io/jQuery.countdown/examples/month-and-week-offset.html
Months and weeks offsets - jQuery.countdown
Display the possibles days offsets %n, %d and %D regarging the months, weeks and the total amount of the days until the finish date. New year's eve in months: HTML: JS: $('#wrapper').countdown('2020/10/10', function(event) { $('#clock-a').html(event.strfti
hilios.github.io
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| jQuery Pagination Plugin: Good Paginator 추천 페이징 (4) | 2023.05.18 |
|---|---|
| fullCalendar 의 tooltip 및 좌측 시간별 width 조절하기 (0) | 2023.03.16 |
| jQuery.qrcode 를 활용한 qr code 생성하기 (1) | 2021.09.14 |
| javascript 이메일 정규식 생성하기 email regex validation (7) | 2021.03.11 |
| jQuery 의 년월 달력 year month, 년월일 year month day 달력 샘플 소스 (2) | 2021.02.17 |