728x90
전에 포스팅한 적이 있는 오픈소스 글https://selinak.tistory.com/3의 9번 소스이다.
얼마전 디데이를 노출하는 홈페이지 퍼블리싱 작업을 하면서 이 소스를 유용하게 써서 아카이빙을 해보려한다.
🎅🎄
2022년 크리스마스까지 며칠이 남았을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-DAY COUNTER</title>
</head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.xmas {
display:grid;
width:100%;
height:470px;
background: url(https://images.unsplash.com/photo-1543258103-a62bdc069871?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80) no-repeat center/cover;
}
.xmas h3 {
align-self: center;
justify-content: center;
text-align:center;
font-size: 2.5em;
color:#fff;
text-shadow: 0 0 15px #fff;
}
</style>
<body>
<div class="xmas"><h3></h3></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script type="text/javascript">
// $('.xmas h3').countdown('2022/12/25', function(event) {
// $(this).text(event.strftime('D - %D %H:%M:%S'));
// });
$('.xmas h3').countdown('2022/12/25')
.on('update.countdown', function(event) {
var format = '%H:%M:%S';
if(event.offset.totalDays > 0) {
format = 'D- %D ' + format;
}
$(this).text(event.strftime(format));
})
.on('finish.countdown', function(event) {
$(this).html('<i>Merry Christmas!</i>')
});
</script>
</body>
</html>위의 소스는 디데이인 크리스마스까지 남은 날짜와 시간을 표시하다가, 디데이가 지나면 Merry Christmas! 문구를 노출합니다.
원래는 로컬 jquery.countdown.min.js를 활용하지만, 나는 편의상 라이브러리에서 가져왔다.
위의 예제가 어렵다면 The Final Countdown에서 제공하는 기본예제를 살펴보자!
2023년 1월 1일까지 남은 시간은?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-DAY COUNTER</title>
</head>
<body>
<p style="padding:1em;border:1px solid gold;">
2023년 1월 1일까지 남은 시간은?
<span id="clock"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<script type="text/javascript">
$('#clock').countdown('2023/01/01', function(event) {
$(this).html(event.strftime('%D일 %H:%M:%S'));
});
</script>
</body>
</html>countdown('')에 디데이(시간까지 설정 가능)를 설정하고 특정 셀렉터에 어떤 포맷으로 노출할지 strftime()을 수정하면 된다.
📌
http://hilios.github.io/jQuery.countdown/documentation.html#formatter
날짜를 표시하는 포맷에 대한 내용은 위 링크를 참고하면 됩니다.
html뿐만 아니라, 셀렉터.text()형식으로 텍스트만 넣는것도 가능하다. 단, text 형식으로 넣을 경우 다른 컨텐츠 등 태그가 없는 셀렉터일것!
html()은 태그까지 구현하지만, text는 정말 텍스트만 넣는것임..!
728x90
'Front-end > Javascript' 카테고리의 다른 글
| [Javascript] HTML요소(div, p, span)의 텍스트를 클립보드로 복사하기 버튼 - Copy Text to Clipboard (0) | 2023.02.22 |
|---|---|
| [HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 (0) | 2023.02.16 |
| [HTML/SCSS/Javascript] Spliting.js 및 transformation 연습 (0) | 2023.01.30 |
| [Javascript] input에 포커스 되면 value 지우기 (0) | 2023.01.19 |
| [Javascript] Input[type="text"]에 숫자만 입력하기 (0) | 2023.01.02 |
