全画面カウントダウン広告コピペ一発JavaScript！秒数を設定するだけ

5 秒後に広告が閉じます

強力な広告表示方法を、コピペでできるコード付きで解説します。

動作確認はこちら

Javascript
CSS
HTML
使用方法
使用例
注意事項

Javascript

function closeAdAfterTimeout(adId, timeout) {
            var countdownElement = document.querySelector('#' + adId + ' .countdown span');
            var remainingTime = timeout / 1000; // Convert to seconds

            var countdownInterval = setInterval(function() {
                remainingTime -= 1;
                countdownElement.textContent = remainingTime;

                if (remainingTime <= 0) {
                    clearInterval(countdownInterval);
                    closeAd(adId);
                }
            }, 1000);
        }

function closeAd(adId) {
            var ad = document.getElementById(adId);
            if (ad) {
                ad.style.display = 'none';
            }
        }

function showAd(adId) {
            var ad = document.getElementById(adId);
            if (ad) {
                ad.style.display = 'block';
                closeAdAfterTimeout(adId, 5000); // 5000 milliseconds = 5 seconds
            }
        }

// Add event listener to the button
document.getElementById('showAdButton').addEventListener('click', function() {
            showAd('prestitial-ad');
        });

HTMLに設置してあるIDshowAdButtonのボタンをクリックすると、showAd関数が呼び出され、広告が表示れる。

showAd関数内でcloseAdAfterTimeout関数が呼び出され、指定された時間（この例では5000ミリ秒＝5秒）後に広告を閉じるように設定されている。ここの設定で秒数を変更する。

指定された時間が経過すると、closeAd関数が自動的に呼び出され、広告が閉じる。

このコードは、広告を表示した後、自動的に5秒後に広告を閉じる動作を実現する。

CSS

.ad {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.ad-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.countdown {
    position: absolute;
    top: 30%; /* この値を変更しました */
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 5px;
}

HTML

<div id="prestitial-ad" class="ad">
    <div class="countdown">
        <span>5</span> 秒後に広告が閉じます
    </div>
    <div class="ad-content">
       <img src="画像バナー" alt="カウントダウン広告">
    </div>
</div>