显示倒计时时间表jquery会话超时

我找到了https://github.com/travishorn/jquery-sessionTimeout这个我想在我的项目中使用的jquery会话超时。

它看起来在背景中工作得很好，尽管我想在文本中显示倒计时时间？

如何显示计时器 ，或者你们除了这个以外还有其他建议吗？

(function( $ ){ jQuery.sessionTimeout = function( options ) { var defaults = { message : 'Your session is about to expire.', keepAliveUrl : '/keep-alive', redirUrl : '/timed-out', logoutUrl : '/log-out', warnAfter : 900000, // 15 minutes redirAfter : 1200000 // 20 minutes }; // Extend user-set options over defaults var o = defaults, dialogTimer, redirTimer; if ( options ) { o = $.extend( defaults, options ); } // Create timeout warning dialog $('body').append('
'+ o.message +'
'); $('#sessionTimeout-dialog').dialog({ autoOpen: false, width: 400, modal: true, closeOnEscape: false, open: function() { $(".ui-dialog-titlebar-close").hide(); }, buttons: { // Button one - takes user to logout URL "Log Out Now": function() { window.location = o.logoutUrl; }, // Button two - closes dialog and makes call to keep-alive URL "Stay Connected": function() { $(this).dialog('close'); $.ajax({ type: 'POST', url: o.keepAliveUrl }); // Stop redirect timer and restart warning timer controlRedirTimer('stop'); controlDialogTimer('start'); } } }); function controlDialogTimer(action){ switch(action) { case 'start': // After warning period, show dialog and start redirect timer dialogTimer = setTimeout(function(){ $('#sessionTimeout-dialog').dialog('open'); controlRedirTimer('start'); }, o.warnAfter); break; case 'stop': clearTimeout(dialogTimer); break; } } function controlRedirTimer(action){ switch(action) { case 'start': // Dialog has been shown, if no action taken during redir period, redirect redirTimer = setTimeout(function(){ window.location = o.redirUrl; }, o.redirAfter - o.warnAfter); break; case 'stop': clearTimeout(redirTimer); break; } } // Begin warning period controlDialogTimer('start'); }; })( jQuery ); 

这是工作样本=> http://jsfiddle.net/xHEF9/515/

Answer 1

试试这个

 var SessionTime = 10000; var tickDuration = 1000; var myInterval = setInterval(function() { SessionTime = SessionTime - tickDuration $("label").text(SessionTime); }, 1000); var myTimeOut = setTimeout(SessionExpireEvent, SessionTime); $("input").click(function() { clearTimeout(myTimeOut); SessionTime = 10000; myTimeOut = setTimeout(SessionExpireEvent, SessionTime); }); function SessionExpireEvent() { clearInterval(myInterval); alert("Session expired"); } 

看到这个jsFiddle示例。