Появление дива при отсутствии движений мыши

#javascript

Можно ли реализовать появление дива на сайте, если курсор мыши не двигается в течение
определенного времени? Если да, то как это можно сделать?    

Ответы

Ответ 1

Примерно так: http://jsfiddle.net/q3hnLnpk/
HTML

    Не спи на работе
    
ну я же просил!


JavaScript
var x = 0,
    y = 0,
    divTimeout,
    spoiler = document.getElementById('spoiler'),
    showed = false;

spoiler.style.display = 'none';

document.getElementById('body').onmousemove = function(e) {
    x = e.clientX;
    y = e.clientY;    
}

setInterval(function() {
    if (x == 0 && y == 0) {
        console.log('mouse stopped');
        if (!showed) {
            divTimeout = setTimeout(function() {
                spoiler.style.display = 'block';
            }, 2000);
            showed = true;
        }
    } else {
        console.log('mouse moves');
        clearTimeout(divTimeout);
        spoiler.style.display = 'none';
        showed = false;
    }
    x = 0;
    y = 0;
}, 100);

Обновление
В FF dev работает, как изложено в вопросе, без каких-то морганий. Мышкой надо двигать
по тексту "Не спи на работе", т.к. на нем висит обработчик событий. В реальном примере
его следует повесить на .
Скрипт работает следующим образом: на div #body вешается обработчик onmouseover,
который сохраняет текущие координаты мыши. Параллельно работает setInterval, который
обнуляет координаты мыши и проверяет, не равны ли они нулю (если мышью шевелить, то
они не будут нулевыми). Если не равны, то пользователь двигает мышкой, если обнулены
- нет, тогда и показываем сообщение


Ответ 2

Нужно зарядить setTimeout(), который покажет div через опр. время.
По событию движения мыши, надо прятать этот div, и переопределять таймаут на новое время.
Работающий пример
var spoiler = document.getElementById('spoiler'),
    timeout,
    wait = 800; // ms, сколько можно не двигать мышь

function alive(){ // убрать напоминалку и выставить таймер
    clearTimeout(timeout);
    spoiler.style.display = 'none';
    timeout = setTimeout(remind, wait);
}

function remind(){
    spoiler.style.display = 'block';
}

// поехали!
spoiler.style.display = 'none';
document.addEventListener( 'mousemove', alive);
timeout = setTimeout(remind, wait);