반응형
1. 아래의 코드 복사
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900">
<title>Document</title>
<style>
body{
background-color: white;
}
#timer {
color: #eeeeee;
text-align: center;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
font-size: .7em;
letter-spacing: 5px;
}
.days, .hours, .minutes, .seconds {
display: inline-block;
padding: 20px;
width: 100px;
border-radius: 5px;
}
.days {
background: #EF2F3C;
}
.hours {
background: #eeeeee;
color: #183059;
}
.minutes {
background: #276FBF;
}
.seconds {
background: #F0A202;
}
.numbers {
font-family: 'Montserrat', sans-serif;
color: #183059;
font-size: 4em;
text-align: center;
}
.white {
position: absolute;
background: #eeeeee;
height: 85px;
width: 75px;
left: 30%;
top: 2%;
}
.red {
position: absolute;
background: #EF2F3C;
left: 18%;
top: 9%;
height: 65px;
width: 70px;
}
.blue {
position: absolute;
background: #276FBF;
height: 80px;
width: 80px;
left: 60%;
top: 5%;
}
</style>
</head>
<body>
<div id="timer">
<div class="days">
<div id="days" class="numbers "> </div>days</div>
<div class="hours">
<div id="hours" class="numbers"> </div>hours</div>
<div class="minutes">
<div id="minutes" class="numbers"> </div>minutes</div>
<div class="seconds">
<div id="seconds" class="numbers"> </div>seconds</div>
</div>
</div>
</body>
<script>
const year = new Date().getFullYear();
const myDate = new Date('Oct 15, 2024 00:00:00');
console.log(myDate);
// countdown
let timer = setInterval(function() {
// get today's date
const today = new Date().getTime();
// get the difference
const diff = myDate - today;
// math
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
// display
document.getElementById("days").innerHTML=days
document.getElementById("hours").innerHTML=hours
document.getElementById("minutes").innerHTML=minutes
document.getElementById("seconds").innerHTML=seconds
}, 1);
</script>
</html>
2. 아래 링크 접속
Apption - Embed Notion Simple CountDown Widget
Learn how to embed Simple CountDown widget into your Notion Embed Block
apption.co
3. 파란 링크 클릭
4. 위에서 복사한 코드 붙여넣기
5. 원하는 날짜 조정하기 (106번째 코드)
6. 교체한 모습 (대신 월을 입력할 때는 아래와 똑같이 입력해야 함)
Months
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec"
7. 다크/라이트 모드 변경
8. 임베드 복사
9. 노션에서 임베드 삽입
10. 크기조절하면 끝
반응형
'🖥️ IT, 컴퓨터 > 📄 노션 Notion' 카테고리의 다른 글
| [노션 양식 공유] 2023년 7월 일정 관리 템플릿 무료 공유 (0) | 2023.06.20 |
|---|---|
| [노션] 노션에서 내 삶을 시각적으로 표현하는 방법 (0) | 2023.05.21 |
| 노션으로 일잘러 되기 (기본 글꼴 3개 말고 원하는 글꼴, 웹사이트 저장, 테마 설정, 일정관리) (0) | 2023.05.21 |
| [노션 양식 공유] 2024년 연간 계획표 노션 템플릿 공유 (36) | 2023.05.21 |
| [노션 양식 공유] 장기목표 + 단기목표 템플릿 공유 : 나무보다 숲을 보자 (0) | 2023.05.21 |
댓글