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

About Pragnesh Karia

Pragnesh Karia, Open Source Enthusiast, Software Professional, Software Developer, Technical Lead ,Magento, Joomla ,Joomla LMS , Moodel LMS ,PHP ,Mysql, Ajax, Javascript, Jquery, Linux, Fan of Open Sources , Annet Technologies , SEO Analyst , Mootools