ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して 2 回目のクリックで閉じる効果を実現する方法

JavaScript を使用して 2 回目のクリックで閉じる効果を実現する方法

PHPzオリジナル: 2023-04-26 14:24:54763ブラウズ

フロントエンドテクノロジーの継続的な開発により、Web サイトはますますインタラクティブになり、さまざまな効果を実現するために JavaScript を使用する必要がある Web サイトがますます増えています。その中でも最も一般的なのがクリックイベントで、Webサイトによってはクリック後に閉じるために再度クリックする必要があるケースが増えています。そこで問題は、JavaScript クリックによる 2 番目の閉じる効果をどのように実現するかということです。

1. 基本的な考え方

JavaScript クリックの 2 番目のクローズ効果を達成することは難しくありません。基本的な考え方は次のとおりです:

1. クリックイベントを監視し、各クリックを合計します。クリック数;

2. クリック数が指定された数に達したら、クローズ操作を実行します。

2. 実装

例を通してこの関数を実装してみましょう。

<body>

  <h1>JavaScript点击第二次关闭</h1>

  <p>这是一个演示点击第二次关闭的效果的实例。</p>

  <button id="closeBtn">关闭</button>

  <script src="main.js"></script>

</body>

JavaScript 部分

var closeBtn = document.getElementById("closeBtn");
var clickCount = 0;

closeBtn.onclick = function() {
  clickCount++;
  
  if (clickCount == 2) {
    window.close();
  }
};

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
}

ボタンを 1 回クリックしてもウィンドウは閉じません;

ボタンを 2 回クリックすると、ウィンドウは自動的に閉じます。

4. 注意事項

1. クリックイベントにはボタン、ハイパーリンクなどを指定できます;

2. クリック数は任意の数として指定できます;

3. 閉じる操作には、Web ページを閉じる、ボタンを非表示にするなど、任意の操作を指定できます。

つまり、実際のニーズと基本的なアイデアの柔軟な使用に応じて、JavaScript を 2 回閉じる効果を実現できます。

以上がJavaScript を使用して 2 回目のクリックで閉じる効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript APIとは次の記事：JavaScript APIとは

続きを見る