모바일과 PC버전에서 소스충돌 이유 해결해주실 고수님 찾습니다..
본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.countdown {
font-size: 2rem;
font-weight: bold;
color: #f87171;
}
.icon {
font-size: 1.5rem;
color: #ec4899;
margin: 0 0.5rem;
}
</style>
</head>
<body class="flex justify-center items-center h-screen bg-gray-100">
<div class="flex items-center text-lg">
<i class="fas fa-alarm-clock icon"></i>
<span class="font-bold text-gray-800">⏰얼리버드 종료 까지⏰</span>
<div class="countdown ml-4" id="countdown">Loading...</div>
<i class="fas fa-alarm-clock icon"></i>
</div>
<script>
function getNextMidnight() {
const now = new Date();
const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
return midnight.getTime();
}
// Update the countdown every 1 second
const x = setInterval(function() {
const now = new Date().getTime();
const countDownDate = getNextMidnight();
const distance = countDownDate - now;
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML = `${hours}시간 ${minutes}분 ${seconds}초`;
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "종료되었습니다";
}
}, 1000);
</script>
</body>
</html>
PC버전에서는 기능이 구현이 되는데 모바일 버전에서는 소스가 충돌이 되어서 타이머 기능이 작동되지 않습니다 왜 이러는 걸까요?
답변 1
function getNextMidnight() {
const now = new Date();
const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, 0);
return midnight.getTime();
}
시도해보세요.
그래도 안돼요..
답변을 작성하시기 전에 로그인 해주세요.
