支払いカウントダウンを実現し、ホームページに戻るためのjs

ホームページに戻るための支払いカウントダウンケースの概要: シンプルな js 構文、getElementsByTagName、location.href などを使用して、ホームページのボタンをバインドして別のページにジャンプします。

インデックス.html

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

<!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>
    <スタイル>
        .ラッパー{
            背景色:アクアマリン;
            幅: 300ピクセル;
            高さ: 300px;
            マージン: 0 自動;
        }
        h2{
            テキスト配置: 中央;
        }
        ボタン{
            テキスト配置: 中央; 
            左マージン: 68px;
        }
    </スタイル>
</head>
<本文>
    <div class="wrapper">
      <h2>製品:スマイル</h2>
      <h2>価格:無限大</h2>
      <h2>お支払い方法:ネット</h2>
      <h2>注文番号:123456789</h2>
      <button>キャンセル</button>
      <button>支払う</button>
    </div>
 
    <スクリプト>
        //ロジック: 支払いボタンをクリックしてページにジャンプします // 2番目（1番目は0）の「button」というタグを取得し、クリックイベントを追加して関数をバインドします document.getElementsByTagName('button')[1].onclick = function(){
            //ジャンプ前の確認ボックス let res = window.confirm('お支払いを確認してください');
            //真かどうか判断し、真であればジャンプする if (res) {
                //ディレクトリ内の HTML ページを直接使用するか、他の Web サイト リンクを入力します location.href = "./return.html"
            }
        }
    </スクリプト>
</本文>
</html>

戻り値.html

<!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>
    <スタイル>
        .ラッパー{
            幅: 300ピクセル;
            高さ: 400px;
            マージン: 0 自動;
        }
        。コンテンツ{
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
    <div class="wrapper">
        <div class="content">
        <h2>支払いが完了しました</h2>
        <span id="countDown">10 秒後にホームページに戻る</span><button>すぐに戻る</button>
        </div>
    </div>
 
    <スクリプト>
        //ロジック: ページが開き、カウントダウンが始まります window.onload = function(){
            //最初に割り当てます let timer = 10;
            //カウントダウン//矢印関数()=>{} ==関数(){}
            設定間隔(()=>{
                タイマー - ;
                document.getElementById('countDown').innerText = タイマー;
                // 0 になったらホームページにジャンプします if (timer==0) {
                    location.href = "./index.html"
                }
            },1000);
        }
        //ボタンをクリックするとすぐにホームページに戻りますdocument.getElementsByTagName('button')[0].onclick = function(){
            location.href = "./index.html"
        }
    </スクリプト>
</本文>
</html>

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

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