javascript - 10 個の div を切り替えますが、マウスを動かさないと数秒後に最初の div に戻ります

Question

ヘッダーに 9 個のリンク、本文に 10 個の div があります。最初の div はメイン ページで、他の 9 つの div には異なるコンテンツが含まれています。私がやりたいのは、人々が9つのリンクをマウスオーバーすると、9つのdivのうちの1つが表示されることです。ただし、ユーザーがマウスの使用をやめた場合は、5 分後に最初の div に戻る必要があります。

誰かがこれを設定するのを手伝ってくれることを願っています。

Answer 1

このようなものはどうですか？

// call showPage('something') to switch to a different section
var currPage = 'main';
function showPage(id) {
    if (currPage !== null) {
        document.getElementById(currPage).style.display = 'none';
    }
    currPage = id;
    document.getElementById(currPage).style.display = 'block';
}

var lastMove = new Date().getTime();
document.onmousemove = function() {
    lastMove = new Date().getTime();
}
setInterval(function() {
    var now = new Date().getTime();
    if (now - lastMove > 300000) {
        showPage('main');
    }
}, 5000);

lastMoveマウスが動くたびに現在のタイムスタンプで更新されるグローバル変数を保持します。

次に、マウスが最後に移動してから 5 分経過した場合に何かを実行できる、5 秒ごとに呼び出される関数があります。