정경****

review

2025-08-24

[무료특강] 아임웹 기초, 랜딩페이지 만들기

차분하고 곰꼼하게 잘 설명해주셔서 감사드립니다~
타이머 코드 부탁드려요^^

1

관리자2025-09-04 16:23

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카운트다운 타이머</title>
<style>
.main_border {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #ffffff;
}

.timer_group_border {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 10px;
}

.timer_border {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
margin: 5px;
font-family: 'Bebas Neue', cursive;
color: white;
}

.timer_number {
font-size: 50px;
line-height: 1.1;
}

.timer_label {
font-size: 16px;
line-height: 1;
margin-top: 2px;
}

.date_slice {
font-family: 'Bebas Neue', cursive;
font-size: 40px;
color: #000000;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="main_border" id="timer"></div>

<script type="text/javascript">
function startTimer() {
const targetInterval = 5 * 24 * 60 * 60 * 1000; // 5일 주기
let baseTime = new Date("2024-11-30T00:00:00").getTime();

function updateTimer() {
const now = new Date().getTime();
let diff = baseTime - now;

if (diff <= 0) {
baseTime = now + targetInterval;
diff = baseTime - now;
}

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor(diff / (1000 * 60 * 60)) % 24;
const mins = Math.floor(diff / (1000 * 60)) % 60;
const secs = Math.floor(diff / 1000) % 60;

const d = String(days).padStart(2, "0");
const h = String(hours).padStart(2, "0");
const m = String(mins).padStart(2, "0");
const s = String(secs).padStart(2, "0");

document.getElementById("timer").innerHTML =
'<div class="timer_group_border"><div class="timer_border"><div class="timer_number">' + d + '</div><div class="timer_label">DAYS</div></div></div>' +
'<div class="date_slice">:</div>' +
'<div class="timer_group_border"><div class="timer_border"><div class="timer_number">' + h + '</div><div class="timer_label">HRS</div></div></div>' +
'<div class="date_slice">:</div>' +
'<div class="timer_group_border"><div class="timer_border"><div class="timer_number">' + m + '</div><div class="timer_label">MIN</div></div></div>' +
'<div class="date_slice">:</div>' +
'<div class="timer_group_border"><div class="timer_border"><div class="timer_number">' + s + '</div><div class="timer_label">SEC</div></div></div>';
}

updateTimer();
setInterval(updateTimer, 1000);
}

window.onload = startTimer;
</script>
</body>
</html>

요걸로 작업해보세요! 마음에 들지 않는 색이나 디자인은 chatgpt에게 수정해달라고 해보시면 됩니다. 아임웹 코드 작성 부분에 코드를 써서 보실 수 있어요.

목록

[무료특강] 아임웹 기초, 랜딩페이지 만들기

무료

39,000원

[무료특강] 아임웹 기초, 랜딩페이지 만들기

무료

39,000원

3000+
누적 수강생

3000+
누적 후기

10K+
구독자

50+
온라인 무료특강 진행

당신의 전문성이

3000+
누적 수강생

3000+
누적 후기

10K+
구독자

50+
무료특강

클래스별 강좌

차분하고 곰꼼하게 잘 설명해주셔서 감사드립니다~ 타이...

더소셜즈 프로그램으로

당신의 전문성을 온라인에서 빛내보세요.

[무료특강] 아임웹 기초, 랜딩페이지 만들기

[무료특강] 아임웹 기초, 랜딩페이지 만들기

함께하는 더소셜즈 성장 커뮤니티

3000+누적 수강생

3000+누적 후기

10K+구독자

50+온라인 무료특강 진행

당신의 전문성이

3000+누적 수강생

3000+누적 후기

10K+구독자

50+무료특강

클래스별 강좌

차분하고 곰꼼하게 잘 설명해주셔서 감사드립니다~ 타이...

더소셜즈 프로그램으로

당신의 전문성을 온라인에서 빛내보세요.

[무료특강] 아임웹 기초, 랜딩페이지 만들기

[무료특강] 아임웹 기초, 랜딩페이지 만들기

함께하는 더소셜즈 성장 커뮤니티

3000+
누적 수강생

3000+
누적 후기

10K+
구독자

50+
온라인 무료특강 진행

3000+
누적 수강생

3000+
누적 후기

10K+
구독자

50+
무료특강