JavaScript で支払いの 10 秒カウントダウンを実現

この記事では、支払いの10秒カウントダウンを実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果図は以下のとおりです。

このケースは実はとても簡単です。jsの基本のonclick関数とタイマーの使い方をマスターすれば、すぐにこのような効果を得ることができます。やり方を見てみましょう〜

まず、2つのHTMLファイルが必要です。HTMLとCSSを使用して、2つのファイルに初期ページ効果を記述します。ここでは詳細には触れません。詳細については、次のコードを参照してください。

js が生成する必要のある効果について説明しましょう。

1. 1ページ目の「Pay in」をクリックして別のファイルに移動します
2. 最初にページ 2 に入ると、10 秒間のカウントダウンが開始されます。カウントダウンが終了したら、ページ 1 に戻ります。
3. ページ2の「今すぐ戻る」をクリックしてページ1に戻ります。

これが私たちがやるべき効果です

では、2 つのページ間を移動するにはどうすればよいでしょうか?

=> onclickとlocation.href="url" rel="external nofollow"を使用して、マウスがクリックされたときに location.href を変更します。
(ここでの URL は、保存した別の HTML ファイルの場所を指します)

タイミング効果は非常にシンプルです。setInterval setInterval使用して要素のinnerText変更するだけです。数値が 0 になると、ページにジャンプする場所が変更されます。

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

ページ1:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        #ボタン{
            表示: ブロック;
            マージン:130px 自動;
            幅: 300ピクセル;
            高さ: 100px;
            フォントサイズ:30px;
        }
    </スタイル>
</head>
<本文>
    <button id="btn">支払う</button>
    <スクリプト>
        btn = document.getElementById("btn"); とします。
        
        btn.onclick=関数(){
            let con = window.confirm("よろしいですか?");
            if(con){
                location.href='./payment.html';
            }
        }
    </スクリプト>
</本文>
</html>

ページ2:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        #スパ {
            フォントサイズ: 20px;
            色: 赤;
        }

        ＃合計 {
            幅: 200ピクセル;
            高さ: 200px;
            背景色: rgba(169, 169, 169, 0.315);
            マージン: 40px 自動;
            境界線の半径: 20px;
            パディング: 20px;
            位置:フレックス;
            flex-direction: 列;
            テキスト配置: 中央;
        }

        #合計h3 {
            パディング上部: 20px;
        }

        #合計ボタン{
            上マージン: 30px
        }
    </スタイル>
</head>

<本文>
    <div id="total">
        <h3>おめでとうございます。お支払いが完了しました。 </h3>
        <div>
            <span id="spa">10</span>
            <span>数秒後に自動的にホームページに戻ります</span>
        </div>
        <button id="btn">今すぐ戻る</button>
    </div>
    <スクリプト>
        var spa = document.getElementById("spa");
        t = 10 とします。
        間隔を設定する(() => {
            t--;
            spa.innerText = t;
            t == 0 の場合
                location.href = "./pay 10 seconds.html";
            }
        }, 400);
        
        var btn = document.getElementById("btn");
        btn.onclick=関数(){
            location.href="./Pay 10 seconds.html" rel="外部nofollow" 
        }
    </スクリプト>
</本文>

</html>

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

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