JavaScript マウスを 3 回以上クリックすると、在庫不足のコードが表示されます。

Web 開発では、JavaScript を使用して、多くのインタラクティブな特殊効果や動的なインタラクティブ機能を Web ページに追加できます。その中でも、マウス クリック イベントは非常に一般的なインタラクティブ イベントです。場合によっては、ユーザーが一定回数以上連続してボタンをクリックすると、プロンプトボックスが自動的に表示され、在庫不足などの情報を求める機能を設定する必要がある場合があります。

以下では、JavaScript コードを通じてこの関数を実装します。

1. マウスのクリック数を取得する

まず、ユーザーがボタンをクリックした回数を取得する必要があります。この機能は、JavaScript のグローバル カウンター変数を通じて実現できます。関連するコードは次のとおりです。

var count = 0;

document.getElementById("button").addEventListener("click", function() {
  count++;
});

上記のコード スニペットでは、まずユーザーがボタンをクリックした回数を記録するために count という名前の変数を定義します。初期値は 0 です。次に、addEventListener() メソッドを使用して、マウス クリック イベントをボタンに登録します。ユーザーがボタンをクリックするたびに、count 変数の値が 1 ずつ増加します。

2. クリック数が設定されたしきい値を超えているかどうかを判断する

次に、ユーザーがボタンをクリックした回数が設定されたしきい値を超えているかどうかを判断する必要があります。プロンプトボックスをポップアップ表示するかどうかを決定します。しきい値を 3 に設定します。

クリック数を取得したら、条件ステートメントを使用してプロンプト ボックスをポップアップする必要があるかどうかを決定できます。対応するコードは次のとおりです。

if (count > 3) {
  alert("库存不足！");
  count = 0; // 重置计数器
}

上記のコードでは、ユーザーが 3 回以上クリックすると、alert() メソッドが呼び出され、プロンプト ボックスがポップアップ表示されます。プロンプトボックスに「在庫が不足しています!」というテキストメッセージが表示されます。同時に、連続クリックによって後続の操作がトリガーされるのを避けるために、ここでは count 変数の値を 0 にリセットします。

3. 完全なコード

最後に、参照用に上記の 2 つの関数を完全な JavaScript コードに統合します。

var count = 0;

document.getElementById("button").addEventListener("click", function() {
  count++;
  if (count > 3) {
    alert("库存不足！");
    count = 0; // 重置计数器
  }
});

上記のコードでは、次を取得します。 getElementById() メソッドを通じてクリック イベントにバインドする必要があるボタン要素。次に、クリック イベントが addEventListener() メソッドを通じてボタンに登録され、カウンターとプロンプト ボックスのロジックがコールバック関数に実装されます。

要約すると、この記事では、マウスが設定回数以上クリックされ続けたときに自動的にプロンプ​​ト ボックスを表示する機能を JavaScript を使用して実現する方法を紹介します。実際の開発では、ビジネスニーズに応じて対応する修正を加え、より実際の状況に即したコードを取得できます。

以上がJavaScript マウスを 3 回以上クリックすると、在庫不足のコードが表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。