カウントダウンタイマーを使用して

8426 ワード
webdev css javascript html テキストリンク
参考文献

親愛なる読者
我々は、いくつかの販売や取引に関する情報を与えるカウントダウンタイマーとeコマースのウェブサイトに遭遇している可能性があります.我々は、我々は割引販売が終了するときに私たちが通知するカウントダウンタイマーを配置するWebページを作成します.そのようなシナリオをここで実装しましょう.カウントダウン開始⏳ !!!
プロジェクトのフォルダ構造
  • インデックス.HTML -ページに表示される要素構造を定義するHTMLレイアウトを含みます.
  • イメージは、我々のプロジェクトのフォルダの中に直接置かれます.
  • スタイル.CSS -スタイルのためのCSSコードが含まれています.CSSを使用すると、それらをより視覚的に魅力的にするために異なる部分をスタイルすることができます.
  • スクリプト.js - JavaScriptコードを含みます.タイマーのすべての機能を扱うために一緒に働くいくつかの機能があります.

    • HTMLレイアウト
    vscodeを開き、インデックスの基本的なHTML構造を作成します.HTMLファイル!タブを押す.カウントダウンタイマー*としてタイトルを与えます.リンク*スタイル.CSSスクリプトとスクリプト.作成されたHTMLファイルへのjs.
    製品に関連するすべてをラップするDIVクラスプロダクトを作成します.私は、この例のために私の割引された製品として靴を使いました.使用IMGタグは、靴のイメージを追加します.
    次のDIVクラスを追加します.
    詳細-取引に関する情報を保持する.
    ラップ-テキストとテキストをラップします.
    タイマー-全体のカウントダウンタイマーを保持します.
    日、時間、mins、secs -残りの日、時間、mins、secsを保持する.
    日、時間、mins、およびsecsクラスにID DaysSum左、HoursSounds左、minsMount左、およびsecsSoundsのそれぞれのスパンタグを含んでいます.動的データはスパン要素の内部に移動し、要素を取得するためにJavaScriptコードでIDを使用します.
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1> Best deals of the day</h1>
    <div class="product">
        <img src="shoe.jpg" alt="shoes" width="400px" height="300px">
        <div class="details">
            <h3>🔥30% off on all branded shoes🔥</h3>
            <p> This festive season we have multiple amazing offers on all branded shoes.
                Bank and payment offers, and many more deals.This sale brings hundreds of deals
                across all branded shoes. To help you find the best discounts,
                we've handpicked some of the best deals and offers available on shoes during the ongoing discount Sale. Grab the offer soon!!🤩
            </p>
            <div class="wrap">
                <h3 class="offer">Offer ends in</h3>
                <div class="timer">
                    <div class="days">
                        <span id="days_left"> 0</span>
                        days
                    </div>
                    <div class="hours">
                        <span id="hours_left"> 0 </span>
                        hours
                    </div>
                    <div class="mins">
                        <span id="mins_left"> 0 </span>
                        mins
                    </div>
                    <div class="secs">
                        <span id="secs_left"> 0 </span>
                        secs
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="style.js"></script>
</body>

</html>

    CSSスタイリング
    CSSのコーディングのかなりのビットは、視覚的に魅力的で、多くのCSSなしでも、ページを作るために必要です、我々は基本的なカウントダウンタイマーを実装することができます.
    以下はコードです.
    
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

body{
    font-family: 'Oswald', sans-serif;
    align-content: center;
    text-align: center;
    background-color:rgb(244, 248, 250);
}

.product{
display: flex;
background-color: rgb(237, 243, 243);
gap: 7rem;
}

.details{
    display:flex;
    flex-direction: column;
    margin-right: 150px;  
}

.wrap{
    display: flex;
    flex-direction: row;
}
.timer{
    display: flex;
    text-align: center;
    flex-direction: row;
    margin-left: 3rem;
    gap: 30px;
    color:red;
    margin-top: -5px;

}
.days{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}


.hours{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}
.mins{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}

.secs{
    background-color: blanchedalmond;
    padding: 11px;
    font-size: 22px;
}


h3{
    color:lightseagreen;
}

.offer{
    flex-basis: 6rem;
}

p{
    text-align: left;
}

    ジャバスクリプトロジック
    全体のアイデアは、提供の終了前に時間を計算することです.時間を計算するには、現在の日付の違いを取ると終了日を提供し、有効な形式でそれを提示する.
    現在の日付とOfferDateと呼ばれるconstを宣言し、現在の日付を追加し、end - dateオブジェクトを提供するために、count ()という関数を作成しましょう.
    const today = new Date();  
var offerDate = new Date('30 oct 2021');
    OfferDateと今日の間の違いは、時間をミリ秒で左に与えるconst offertimeに割り当てます.
    const offerTime = offerDate - today;
    数日、時間、mins、およびoffertime値を使用して残ったsecsの数を計算しましょう.
    秒を計算する
  • ミリ秒を1000で分割して秒に変換する
  • は合計秒を60で割って、残りをつかむ.あなたは、秒後に残っているだけのすべての秒を必要としないカウントされている:(offerTime/1000)
  • この下の最寄りの全体の番号に.これは、秒の分数ではなく、完全な秒を必要とするためです
    • 計算する
  • ミリ秒を1000で分割して秒に変換する
  • 分(1分= 60秒)を得るために合計60秒を割り、再び60で割り、残りをつかむ.このダウンは、最寄りの全体の番号に.(offerTime/1000) % 60
    • 時間を計算する
  • ミリ秒を1000で分割して秒に変換する
  • 分(1分= 60秒)を得るために60秒で分割し、再び60(1時間= 60分)で分割し、24(1日= 24時間)で結果を分割し、残りをつかむ.このダウンは、最寄りの全体の番号に.Math.floor( (offerTime/1000) % 60 )
    • 計算する
  • ミリ秒を1000で分割して秒に変換する
  • 分(1分= 60秒)を得るために60秒で分割し、再び60(1時間= 60分)で分割し、24(1日= 24時間)で結果を分割します.このダウンは、最寄りの全体の番号に.(offerTime/1000)
    • すべての値があると、私たちは日、時間、mins、secsをHTMLスパン要素に設定します.設定する値をgetElementById ()メソッドを使用して取得し、InnerHTMLを使用して計算した値を設定するHTML要素.
    const days\_el = document.getElementById("days\_left");  
days\_el.innerHTML = offerDays;const hours\_el = document.getElementById("hours\_left");  
hours\_el.innerHTML = offerHours;const mins\_el = document.getElementById("mins\_left");  
mins\_el.innerHTML = offerMins;const secs\_el=document.getElementById("secs\_left");  
secs\_el.innerHTML = offerSecs;
    私は一度だけ提供日が現在の日付に達する提供日をリセットするもう一つの機能を追加しました.必要でなければ、この関数は無視できます.
    setInterval ()メソッドを使用すると、count ()関数は毎秒呼び出されます.Math.floor((offerTime / (1000 * 60) % 60))
    function countdown() {
    const today = new Date();
    var offerDate = new Date('30 oct 2021');

    //If offer ends reset to new value
    if (today.getSeconds() == offerDate.getSeconds()) {
        offerDate = resetOfferDate();
    }

    //offerTime will have the total millseconds 
    const offerTime = offerDate - today;

    // 1 sec= 1000 ms
    // 1 min = 60 sec
    // 1 hour = 60 mins
    // 1 day = 24 hours
    const offerDays = Math.floor(offerTime / (1000 * 60 * 60 * 24));
    const offerHours = Math.floor((offerTime / (1000 * 60 * 60) % 24));
    const offerMins = Math.floor((offerTime / (1000 * 60) % 60));
    const offerSecs = Math.floor((offerTime / 1000) % 60);

    const days_el = document.getElementById("days_left");
    days_el.innerHTML = offerDays;
    const hours_el = document.getElementById("hours_left");
    hours_el.innerHTML = offerHours;
    const mins_el = document.getElementById("mins_left");
    mins_el.innerHTML = offerMins;
    const secs_el = document.getElementById("secs_left");
    secs_el.innerHTML = offerSecs;
}

function resetOfferDate() {
    const futureDate = new Date();
    futureDate.setDate(futureDate.getDate() + 15);
    return futureDate;
}

setInterval(countdown, 1000);
    コーディング完了!出力をチェックする時間.
    上記のすべてのコードはGitHubで利用可能です.より多くの興味深い記事のためにこのスペースを見てください!
    あなたの興味をありがとう.
    Androidカスタムサイドスライドメニューコントロールを簡単に実現
    android開発私の新浪微博クライアント-微博UI編を読む(6.1)