重置鼠标移动倒计时

Question

我已经尝试了几个小时，但我没有找到解决这个问题的方法。

如何在鼠标移动时重新设置倒计时为10？这是代码笔 link:

var timeout = null;

$(document).on('mousemove', function() {
    if (timeout !== null) {
    }

    timeout = setTimeout(function() {
      var timer = 10;
      var interval = setInterval(function() {
       timer--;
      $('.timer').text(timer);
      if (timer === 0) clearInterval(interval);
      }, 1000);
        
    }, 100);
});

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>

Answer 1

根据您的预期行为，您可以使用以下代码段：

var interval;
$(document).on('mousemove', function() {
    clearInterval(interval);
    var coutdown = 10, $timer = $('.timer');
    $timer.text(coutdown);
    interval = setInterval(function() {
      $timer.text(--coutdown);
      if (coutdown === 0) clearInterval(interval);        
    }, 1000);
}).mousemove();

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="timer">10</div>

Answer 2

看这个理解...

var interval;
var time;

$(document).on('mousemove', function() {
    
    clearInterval(interval);
    time=10;
    interval = setInterval(loop, 1000)
        
   
})

function loop(){
   time--;
   $('.timer').text(time);
   if (time <=0 ) clearInterval(interval);
  }

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>

Answer 3

您不一定需要 setTimeout，您可以使用 setInterval 函数执行此操作，该函数检查 div 中的数字并将其减一，并在数字达到 0 时自行清除。

然后在 mousemove 上再次将文本设置为“10”并调用设置间隔的函数。

var timer = null;
function setTimer(){
    timer = setInterval(function(){
        var countdown = parseInt($('.timer').text());    
        $('.timer').text((--countdown).toString());
        if(countdown===0) clearInterval(timer);
    },1000);
}

$(document).on("mousemove",function(){
    if(timer) clearInterval(timer);
    $('.timer').text("10");
    setTimer();
});
setTimer();

.timer {
  position: relative;
  font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timer">10</div>

Answer 4

解决方案 1 - 计时器倒计时

首先只是简单的制作倒数计时器，下面给出了代码，如果你完成了，那么简单添加 windows.location 路径（重定向页面地址）。

 <sctipt>
        var interval;
         $(document).on('mousemove', function () {
             clearInterval(interval);
             var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired  (mouse button click code)
             $timer.text(coutdown);
             interval = setInterval(function () {
                 $timer.text(--coutdown);

                 if (coutdown === 0) {

                     alert("Session expired User successfully logout.");
                     window.location = "UserLogin.aspx";
                 }

             }, 1000);
         }).mousemove();



         var interval;
                     $(document).on('keydown', function () {
             clearInterval(interval);
             var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired (keyboard button press code)
             $timer.text(coutdown);
             interval = setInterval(function () {
                 $timer.text(--coutdown);

                 if (coutdown === 0) {

                     alert("Session expired User successfully logout.");
                     window.location = "UserLogin.aspx";
                 }

             }, 1000);
         }).mousemove();
    <sctipt>

如果您想在网页上显示时间，请添加此代码。

   <html>
         <div class="timer">     
          <p> Session Time</p> 
         </div>
    </html>

解决方案 2 - 带按钮的倒数计时器

HTML :

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
        <div class="timer">
            <span class="hour">00</span>:<span class="minute">00</span>:<span class="second">10</span>
        </div>
        <div class="control">
            <button onClick="timer.start(1000)">Start</button> 
            <button onClick="timer.stop()">Stop</button> 
            <button onClick="timer.reset(60)">Reset</button> 
            <button onClick="timer.mode(1)">Count up</button> 
            <button onClick="timer.mode(0)">Count down</button>
        </div>

CSS :

div.timer {
    border:1px #666666 solid;
    width:190px;
    height:50px;
    line-height:50px;
    font-size:36px;
    font-family:"Courier New", Courier, monospace;
    text-align:center;
    margin:5px;
}

Javascript:

function _timer(callback)
{
    var time = 0;     //  The default time of the timer
    var mode = 1;     //    Mode: count up or count down
    var status = 0;    //    Status: timer is running or stoped
    var timer_id;    //    This is used by setInterval function

    // this will start the timer ex. start the timer with 1 second interval timer.start(1000) 
    this.start = function(interval)
    {
        interval = (typeof(interval) !== 'undefined') ? interval : 1000;

        if(status == 0)
        {
            status = 1;
            timer_id = setInterval(function()
            {
                switch(mode)
                {
                    default:
                    if(time)
                    {
                        time--;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;

                    case 1:
                    if(time < 86400)
                    {
                        time++;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;
                }
            }, interval);
        }
    }

    //  Same as the name, this will stop or pause the timer ex. timer.stop()
    this.stop =  function()
    {
        if(status == 1)
        {
            status = 0;
            clearInterval(timer_id);
        }
    }

    // Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
    this.reset =  function(sec)
    {
        sec = (typeof(sec) !== 'undefined') ? sec : 0;
        time = sec;
        generateTime(time);
    }

    // Change the mode of the timer, count-up (1) or countdown (0)
    this.mode = function(tmode)
    {
        mode = tmode;
    }

    // This methode return the current value of the timer
    this.getTime = function()
    {
        return time;
    }

    // This methode return the current mode of the timer count-up (1) or countdown (0)
    this.getMode = function()
    {
        return mode;
    }

    // This methode return the status of the timer running (1) or stoped (1)
    this.getStatus
    {
        return status;
    }

    // This methode will render the time variable to hour:minute:second format
    function generateTime()
    {
        var second = time % 60;
        var minute = Math.floor(time / 60) % 60;
        var hour = Math.floor(time / 3600) % 60;

        second = (second < 10) ? '0'+second : second;
        minute = (minute < 10) ? '0'+minute : minute;
        hour = (hour < 10) ? '0'+hour : hour;

        $('div.timer span.second').html(second);
        $('div.timer span.minute').html(minute);
        $('div.timer span.hour').html(hour);
    }
}

// example use
var timer;

$(document).ready(function(e) 
{
    timer = new _timer
    (
        function(time)
        {
            if(time == 0)
            {
                timer.stop();
                alert('time out');
            }
        }
    );
    timer.reset(0);
    timer.mode(0);
});

重置鼠标移动倒计时

reset countdown on mousemove

javascript

jquery

onmousemove