Javascript / Jquery Session Logout Timer Clock for Ideal user, which will reset again on mousemove or keyboard action

It took me a little long to get this , which i wanted.

This is made up of simple Jquery and CSS.

I have mixed up few things which i got from internet and after modifications and merging , i got what i want.

Hope This might help you.


working example :


and code is below



<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
br { clear: both; }
.cntSeparator {
font-size: 54px;
margin: 10px 7px;
color: #000;
.desc { margin: 7px 3px; }
.desc div {
float: left;
font-family: Arial;
width: 70px;
margin-right: 65px;
font-size: 13px;
font-weight: bold;
color: #000;
#expireDiv {
width: 90%;
text-align: center;
background-color: #63AFD0;
padding: 10px;
margin: 0;
border: 1px solid #024A68;
color: #024A68;
font-weight: bold;
font-size: 125%;
box-shadow: -1px -1px 5px 1px #5E8C9E inset;
-moz-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
-webkit-box-shadow: -1px -1px 5px 1px #5E8C9E inset;
cursor: pointer;
color: green;
color: red;
color: #024A68;
<script type="text/javascript">
var total_session_time = 5; // after this interval of time if user is ideal then clock timer will start in seconds
var clock_timer = 5; //seconds
var clock_time_start = total_session_time+clock_timer+1;
document.write("<h3>Demo of Session Logout Timer Clock for Ideal user, which will reset again on mousemove or keyboard action</h3><p class='pk'>After <span class='pk1'>"+total_session_time+" Seconds </span>, Session Clock will appear , which will remain for <span class='pk1'>"+clock_timer+" Seconds</span> and if user unable to perform any mousemove , keyboard action it will redirected to logout</p>");
var idleTime = 0;

$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval("timerIncrement()", 1000); // 1 minute
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleTime = 0;
$(this).keypress(function (e) {
idleTime = 0;

});//document ready

function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > total_session_time) {
count= clock_time_start - idleTime;
if (count <= 0)
window.location = 'logout.php'


<div id="expireDiv">
Your session is about to expire. You will be logged out in <span id="currentSeconds"></span> seconds.
If you want to continue, please move mouse or type something.



Share on Facebook