ホーム ページに戻るための支払いカウントダウン ケースの概要: シンプルな 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 で「プラス記号」効果を実装するためのサンプルコード
VMware と Ubuntu を再インストールしましたが、コマンドラインプロンプトが単調すぎて美し...
目次1. ルール 1: Object.Method() 1.1 ケース1 1.2 ケース2 1.3 ...
この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...
nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...
ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...
目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
この記事は、CentOS 7の詳細なインストールチュートリアルを参考のために記録します。具体的な内容...
最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...
目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...
今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...
本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグインさて、もう無駄...
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...
1. 括弧の役割1.1 角括弧 [ ]属性名が角括弧で囲まれている場合、右側には式の値が割り当てられ...