広告を閉じるための JavaScript カウントダウン

広告を閉じるまでのカウントダウンを実装するために JavaScript を使用する

まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。

多くのアプリやウェブページでは、次のような広告を見ることができます。ウェブサイトにアクセスすると、広告がポップアップ表示され、その広告にカウントダウンが表示されます。カウントダウンが終了すると、広告は消えます。コードを使用してこの機能を実装してみましょう。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
 .djs{
 幅: 30ピクセル;
 高さ: 30px;
 位置: 絶対;
 左: 700ピクセル;
 色: 白;
 背景色: 濃い赤;
 }
 。終わり{
 表示: なし;
 }
 </スタイル>
</head>
<本文>
<div class="djs"></div>
<img class="ad" src="../images/1.png" alt="">
<div class="end">広告は終了しました</div>
<スクリプト>
 //5秒後に広告を閉じる var ad=document.querySelector('.ad')
 var div = document.querySelector('.djs')
 var end = document.querySelector('.end')
 var t=5
 楽しい（）
 間隔を設定する(fun,1000)
 関数fun() {
 div.innerHTML = t です。
 (t==0)の場合{
 ad.style.display = 'なし'
 div.style.display='なし'
 end.style.display='ブロック'
 }
 t--
 }
</スクリプト>
</本文>
</html>

デモンストレーション効果:

カウントダウンは右上にあります。

コードの説明:

ここでは、まず関数を作成し、グローバル変数 t を設定します。t はカウントダウン時間です。カウントダウン関数では、div に表示されるテキストをカウントダウン t に変更し、t が 0 に等しいかどうかを判断します。0 に等しい場合は、カウントダウンが終了し、画像とカウントダウンボックスが非表示になり、広告が終了したことを示すボックスが表示されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: