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' 카테고리의 다른 글
| [HTML/CSS] float:left 속성 없이 각 요소를 양측 끝에 정렬하기 - flex (0) | 2022.11.28 |
|---|---|
| [HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 (1) | 2022.11.25 |
| [Javascript] 전체화면 켜는 버튼 만들기 How to - fullscreen (0) | 2022.11.03 |
| [jQuery] 가로 스크롤 탭 메뉴 만들기 (0) | 2022.09.27 |
| [React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) (0) | 2022.07.25 |
