0

ページ上にいくつかの小さなウィンドウがある html ページがあります (ウィンドウの数は定義されていません)。各ウィンドウには.tickingクラスがあります。.tickingjQuery でサーバー時刻を表示するために使用されるクラス + ユーザーのブラウザー。一部のウィンドウは同じように見えますが、.ticking クラスがありません。そのようなウィンドウでは何も起こりません。

したい：

1) 非アクティブの 15 秒でポップアップを表示し、ページのどこからでもティック クラスを削除します

2) ページをクリックするとすべてが返されます。つまり、.ticking クラスがあったクラスに返されます。

それを行う方法はありますか？

私が理解している限り、.tickingクラスの名前を.ticking-sleep1つに変更.ticking-sleepし.ticking、ユーザーがポップアップを閉じたときに名前を変更する必要があります。しかし、それを実現する方法と、どのイベントを使用するかはまだわかりません。

4

1 に答える 1

3

ユーザーのアクティビティには、主にマウスの動きが含まれると思います。クラスなどの名前を変更する関数でsetTimeoutを使用できます。mousemoveハンドラーを使用して、そのタイムアウトを常に15秒にリセットできます。ユーザーがタイムアウトした関数呼び出しの移動を停止すると、クラスが実行されて変更され、ポップアップなどが表示されます。

未テストですが、次のようなものです。

var inactiveTimeout = setTimeout(handleInactiveUser, 15000);

$(document).mousemove(function(){
    //clear the timeout and reset
    clearTimeout(inactiveTimeout);
    inactiveTimeout = setTimeout(handleInactiveUser, 15000);
});

function handleInactiveUser(){
    // change the classes
    // show the popup
}

更新: デモ原理をうまく説明していると思います。

于 2012-09-27T13:27:45.113 に答える