올해 남은 날짜/시간 표시하기 (자바스크립트 & PHP)

이제 2023년도 3개월 정도밖에 남지 않았네요. 사이드바 등에 올해 남은 날짜를 표시하고 싶은 경우 자바스크립트나 PHP를 사용하여 표시할 수 있습니다.

올해 남은 날짜/시간 표시하기

자바스크립트 사용하기

다음과 같은 자바스크립트 코드를 응용할 수 있습니다.

document.addEventListener("DOMContentLoaded", function() {
    function remainingDaysAndHours() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const isLeapYear = (currentYear % 4 === 0 && currentYear % 100 !== 0) || currentYear % 400 === 0;
        const totalDaysInYear = isLeapYear ? 366 : 365;

        // Create a date for the end of the year (December 31, current year)
        const endOfYear = new Date(currentYear, 11, 31, 23, 59, 59, 999);

        // Calculate the difference in milliseconds
        const diff = endOfYear - currentDate;
        const remainingDays = Math.floor(diff / (1000 * 60 * 60 * 24));
        const remainingHours = Math.floor(diff / (1000 * 60 * 60)) % 24;

        const totalRemainingHours = remainingDays * 24 + remainingHours;

        const formattedDays = remainingDays.toLocaleString('en-US');  // Adding a decimal separator

        const yearDiv = `<span class="d-year">${currentYear}년</span>`;
        const daysDiv = `<span class="d-days">${formattedDays}일 남음</span>`;
        const hoursDiv = `<span class="d-hours">(${totalRemainingHours.toLocaleString('en-US')}시간 남음)</span>`;

        return `${yearDiv} ${daysDiv} ${hoursDiv}`;
    }

    const container = document.getElementById("remainingTime");
    container.innerHTML = remainingDaysAndHours();
});

남은 날짜와 시간을 표시하려는 곳에 다음과 같은 HTML 코드를 추가합니다.

<div id="remainingTime"></div>

CSS를 사용하여 스타일을 적절히 조정합니다. CSS 예시:

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #333; /* Dark background for the entire page */
    color: #fff; /* White text color for better visibility on dark background */
}

/* D-데이 */
#remainingTime {
    padding: 20px;
    max-width: 400px; /* Maximum width for the box */
    width: 100%; /* Use full available width, but not exceeding max-width */
    background-color: #444; /* Slightly lighter than the page background for contrast */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Increased shadow for a more 3D effect */
    text-align: center;
    margin: 0 auto; /* Center the box horizontally */
}

#remainingTime span {
    display: block; /* Since you added <br> in the JavaScript, making spans block elements will help in spacing */
    margin: 5px 0; /* Adjusted margin for vertical spacing */
}

.d-year {
    font-weight: bold;
    color: #E4E4E4; /* Light gray for better visibility */
}

.d-days {
    color: #56A6E2; /* A brighter blue for contrast against dark background */
}

.d-hours {
    color: #E8696B; /* A brighter red for contrast against dark background */
}

실제 작동 예시:

 

 

PHP 사용하기

PHP 환경에서는 다음과 같은 코드를 사용할 수 있습니다.

function remainingDaysAndHours() {
    $currentDate = new DateTime();
    $currentYear = $currentDate->format('Y');
    $isLeapYear = (($currentYear % 4 == 0) && ($currentYear % 100 != 0)) || ($currentYear % 400 == 0);
    $totalDaysInYear = $isLeapYear ? 366 : 365;

    // Create a date for the end of the year (December 31, current year)
    $endOfYear = new DateTime("$currentYear-12-31 23:59:59");

    // Calculate the difference
    $interval = $currentDate->diff($endOfYear);
    $remainingDays = $interval->days;
    $remainingHours = $interval->h;

    $totalRemainingHours = $remainingDays * 24 + $remainingHours;

    $formattedDays = number_format($remainingDays);  // Format number with thousands separator

    $output  = '<span class="d-year">' . $currentYear . '년</span>';
    $output .= ' <span class="d-days">' . $formattedDays . '일 남음</span>';
    $output .= ' <span class="d-hours">(' . number_format($totalRemainingHours) . '시간 남음)</span>';

    return $output;
}

echo remainingDaysAndHours();

워드프레스에서는 위의 코드를 테마의 함수 파일에 추가하도록 합니다. 차일드 테마를 만들어서 작업하도록 합니다.

그리고 숏코드를 만들어서 원하는 곳에 추가하는 것이 가능합니다. 쇼트코드를 만들려면 다음과 같은 코드를 함수 파일에 추가합니다.

function remaining_days_shortcode() {
    return remainingDaysAndHours();
}
add_shortcode('remaining_days', 'remaining_days_shortcode');

이제 다음과 같은 숏코드를 남은 날짜와 시간을 표시하고 싶은 곳에 추가합니다.

[remaining_days]

참고

https://cloudways.tistory.com/31

아바다 테마 라이선스(+Themeforest 테마)

https://cloudways.tistory.com/32

클라우드웨이즈: 삭제된 서버 및 애플리케이션(워드프레스) 복원하기

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교