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

支払いカウントダウンを実現し、ホームページに戻るための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript で支払いの 10 秒カウントダウンを実現
  • AngularJS 支払いカウントダウン機能の実装アイデア
  • JavaScript による Alipay カウントダウン ページとコード実装の高模倣
  • 支払いカウントダウンページを作成するためのjs
  • JS決済ページカウントダウンの実装例

<<:  MySQLのどのフィールドがインデックスに適しているかについての簡単な説明

>>:  CSS で「プラス記号」効果を実装するためのサンプルコード

推薦する

Ubuntu 18でターミナルを美しいコマンドラインプロンプトに変更する方法

VMware と Ubuntu を再インストールしましたが、コマンドラインプロンプトが単調すぎて美し...

JavaScript 関数のコンテキストのルールは何ですか?

目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...

Vueはボールのスライディングクロス効果を実現します

この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

HTML ページでギリシャ文字を使用する方法

ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...

MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

CentOS 7のインストールと設定方法のグラフィックチュートリアル

この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

MySQLデータベースのマスタースレーブレプリケーションと読み取り書き込み分離に関する詳細なチュートリアル

目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...

ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...

Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

要素UIテーブルはドロップダウンフィルタリング機能を実現します

この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...

AngularJSにおける括弧の役割の詳細な説明

1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...