Javascript はカウントダウンとポップアップ プロンプトを実装します。

フロントエンド開発ではカウントダウンの使用は避けられません。たとえば、ダブルイレブンイベントを行う場合、イベント開始の半月前に広報活動を行ったり、割引イベントがいつ開始されるかをユーザーに通知したりする必要があります。このとき、サイト全体の特定のページでいつアクティビティが開始されるかをユーザーに通知するなど、カウントダウンが使用されます。イベントの後半、特にイベント終了まで残り 1 日程度の場合は、ポップアップ カウントダウンが使用されます。このカウントダウンは、サイト全体のトップページの上部に設定され（もちろん、トップページの途中など他の場所に設定することも可能）、カウントダウンが終了するとポップアップウィンドウが自動的に消えるように設定されています。 10 秒間、対応するアクティビティ ページをクリックして製品を購入するかどうかはユーザーが決定します。

必要な技術サポート: CSS3、jQuery ライブラリ

HTML コードは次のとおりです:

<section class="the_body">
  <div class="countdown">
    <h3 id="距中国雄于地球之日还有">距中国雄于地球之日还有</h3>
    <div class="countdown_time">
     <span class="the_days"><i>0</i><i>3</i></span>
     <i class="date_text">天</i>
     <span class="the_hours"><i>0</i><i>7</i></span>
     <i class="date_text">时</i>
     <span class="the_minutes"><i>4</i><i>7</i></span>
     <i class="date_text">分</i>
     <span class="the_seconds"><i>1</i><i>1</i></span>
     <i class="date_text">秒</i>
    </div>
  </div>
</section>

CSS コードは次のとおりです:

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}

JavaScript コードは次のとおりです:

<script>
function remaintime() {
 var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
 var nowdate = new Date();//获取当前日期
 var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
    1000 * 60) / (1000));//计算求得剩余秒数
 //当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
 if (remainday < 10) {
  remainday = "0" + remainday;
 }else{remainday+="";
 //当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
 if (remainhour < 10) {
  remainhour = "0" + remainhour;
 }else{remainhour+="";}
 if (remainminute < 10) {
  remainminute = "0" + remainminute;
 }else{remainminute+="";}
 if (remainsecond < 10) {
  remainsecond = "0" + remainsecond;
 }else{remainsecond+="";}
 $(".the_days i:first-child").html(remainday.substr(0, 1));
 $(".the_days i:last-child").html(remainday.substr(1, 2));
 $(".the_hours i:first-child").html(remainhour.substr(0, 1));
 $(".the_hours i:last-child").html(remainhour.substr(1, 2));
 $(".the_minutes i:first-child").html(remainminute.substr(0, 1));
 $(".the_minutes i:last-child").html(remainminute.substr(1, 2));
 $(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
 $(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
 setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果，在分页这段代码可以不设置
</script>

これは私が書いたカウントダウンエフェクトです。もちろん、誰もが自分の好みに応じてカウントダウンエフェクトを設定できます。例えば「日、時、分、分」しか表示できませんが、個人的には「日、時、分、秒」を設定するのは雰囲気が足りないと感じます。ここでのスタイルは好みに応じて変更することもできますが、最終的な効果は、イベント前に激しい雰囲気を作り出すことです。

ここでの HTML コード、CSS コード、JavaScript コードについては、次の点にご注意ください:

1.html コードの詳細については説明しません。重要なのは、JavaScript の操作を容易にするために dom を設定する方法です。

2.css コード。ここでは主に :before および :after 疑似クラスを使用して、カウントダウン値の 3 次元効果を設定します。

3. JavaScript コードも非常に単純な関数です。ここでは、文字列のインターセプトと表示を容易にするために、残り時間を文字列に変換する必要があります。さらに、setTimeout 関数を使用して、1 秒ごとに実行される関数を設定し、残り時間を動的に表示することもできます。もちろん、これら 2 つの関数の設定の効果は同じです。

この時点で、単純なカウントダウン効果が作成されます。ホームページにポップアップ ウィンドウのカウントダウンを設定したい場合は、ユーザーがクリックしたくなるように背景をクールな色に設定し、ポップアップ ウィンドウが 10 秒後に自動的に消えるように設定します (または閉じるボタンを設定するなど)。 。）。

カウントダウンを実装するにはさまざまな方法がありますが、これを最初に紹介し、時間があればまとめていきます。

以上がこの記事の全内容です。皆さんの JavaScript の理解に役立つことを願っています。