CODEWITHSUNDEEP
javascriptjqueryonmousemove
D20537
D20537

Reputation: 31

reset countdown on mousemove

i´m trying since hours but i didn´t get a solution for this problem.

how can i set the countdown to 10 again when the mouse is moving? here is the codepen 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>

Upvotes: 0

Views: 2624

Answers (4)

Ahsan
Ahsan

Reputation: 3

Solution 1 - Count down Timer

First just simple make countdown timer , code is given below and if you done then simple add windows.location path (redirect page address) . 

 <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>

And if you want show the time on your web page add this code . 

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

Solution 2 - Count down Timer with buttons

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);
});

Upvotes: 0

Sidd
Sidd

Reputation: 1397

You don't necessarily need a setTimeout, you can do this with a setInterval function that checks the number inside the div and reduces it by one, and clears itself when the number reaches 0.

Then on mousemove just set the text to "10" again and call the function that sets the interval.

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>

Upvotes: 0

Andre Lehnert
Andre Lehnert

Reputation: 531

Look at this for understanding...

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>

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Depending your expected behaviour, you could use following snippet:

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>

Upvotes: 0

Related Questions