ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLのどのフィールドがインデックスに適しているかについての簡単な説明
>>: CSS で「プラス記号」効果を実装するためのサンプルコード
この記事では、主に、上下固定と中スライドレイアウトを実現するためのフレックスレイアウトのレイアウト方...
1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...
Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...
目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...
今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボック...
p>「サービス」で手動で起動すると、 コンソールから起動します: 次に、...\MySQL S...
目次序文変換関係具体的な実装file2DataUrl(ファイル、コールバック) file2Image...
目次1. プロセス制御2. シーケンシャルプロセス制御3. 分岐フロー制御if文1. 支店構造2. ...
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...
目次典型的なケース付録: 一般的なインデックス障害の状況典型的なケース次の構造を持つ 2 つのテーブ...
a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...
目次1. ファイアウォールの現在の状態を確認する2. ファイアウォールサービスを開始する3. ファイ...
セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...