支払いカウントダウンを実現し、ホームページに戻るための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 で「プラス記号」効果を実装するためのサンプルコード

推薦する

フレックスレイアウトは、上下固定、中間スライドのレイアウトモードを実現します。

この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...

Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル

1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...

ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定

Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...

簡単な約束を段階的に実行する方法を教えます

目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...

あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボック...

Mysql5.7 サービスを開始できません。グラフィカル ソリューション チュートリアル

p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...

JSを使用して画像を効果的に圧縮する方法

目次序文変換関係具体的な実装file2DataUrl(ファイル、コールバック) file2Image...

JavaScript フロー制御 (分岐)

目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...

簡潔なReactコンポーネントを書くためのヒント

目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...

MySQLインデックスの失敗の典型的なケース

目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

CentOS7 ファイアウォールとポート関連コマンドの紹介

目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...

HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析

セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...