会话超时的javascript倒计时计时器
本文关键字：倒计时 计时器 javascript 超时 会话 | 更新日期: 2023-09-27 18:28:05
我想提醒用户会话超时即将到期。我想要一个带有OK按钮的弹出窗口，并在弹出窗口上显示秒数。我可以只使用java脚本吗？我也可以在后面使用C#代码。
现在它检测到会话超时，并弹出通知他们会话已过期。
<script type="text/javascript">
var sessionTimeout = "<%= Session.Timeout %>";
function DisplaySessionTimeout() {
sessionTimeout = sessionTimeout - 1;
if (sessionTimeout >= 0)
window.setTimeout("DisplaySessionTimeout()", 60000);
else {
alert("Your current Session is over due to inactivity.");
}
}
</script>
是的，您可以通过JavaScript实现。这里有一个简单的计数器实现，它的灵感来自我不久前发现的StackOverflow答案：
function Counter(options) {
var timer;
var instance = this;
var seconds = options.seconds || 10;
var onUpdateStatus = options.onUpdateStatus || function() {};
var onCounterEnd = options.onCounterEnd || function() {};
var onCounterStart = options.onCounterStart || function() {};
function decrementCounter() {
onUpdateStatus(seconds);
if (seconds === 0) {
stopCounter();
onCounterEnd();
return;
}
seconds--;
};
function startCounter() {
onCounterStart();
clearInterval(timer);
timer = 0;
decrementCounter();
timer = setInterval(decrementCounter, 1000);
};
function stopCounter() {
clearInterval(timer);
};
return {
start : function() {
startCounter();
},
stop : function() {
stopCounter();
}
}
};
以及如何使用它的示例：
var countdown = new Counter({
// number of seconds to count down
seconds: 3,
onCounterStart: function () {
// show pop up with a message
...
},
// callback function for each second
onUpdateStatus: function(second) {
// change the UI that displays the seconds remaining in the timeout
...
},
// callback function for final action after countdown
onCounterEnd: function() {
// show message that session is over, perhaps redirect or log out
...
}
});
countdown.start();
一旦服务器准备好提醒用户，只需创建计时器，它就会开始倒计时。您可以自定义每个事件发生的情况：计时器何时启动、第二秒何时流逝以及倒计时何时完成。
我发现这个解决方案非常有用。您需要在项目的web.config文件中设置身份验证超时来支持这一点，但我也添加了一个选项，如果用户愿意，可以继续他们的会话。
将以下内容添加到您的HTML母版页在头标签中：
<style type="text/css">
#timeOutWarningOverlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2000;
cursor: pointer;
}
</style>
就在主体标签的开头
<div id="timeOutWarningOverlay">
<div style="height:auto; width:400px; background-color:white; position: fixed;top: 50%;left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding:10px; text-align:center;">
<div>
<b>Your session is about to expire. Please click button below to keep this session current.</b>
<b><span style="background-color:yellow;">00:</span><span id="time" style="background-color:yellow;">59</span></b>
</div>
<a id="keep" href="#">Keep Me Logged In</a>
</div>
</div>
现在用JavaScript来处理这个问题。我喜欢使用Jquery，所以这主要是在Jquery中，但您可以从该方法中获得想法。此示例适用于15分钟的超时。请记住，您需要更新web.config文件身份验证超时。
var counter = 60;
var idleTime = 0;
var countdown;
$(document).ready(function () {
$(window).click(function () {
console.log("click has occured");
idleTime = 0;
})
$(window).keyup(function () {
console.log("key up has occured")
idleTime = 0;
})
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 60000); //found
$('#keep').click(function () {
idleTime = 0;
$('#timeOutWarningOverlay').hide();
});
});
function timerIncrement() {
idleTime = idleTime + 1;
console.log(idleTime);
if (idleTime > 13) //13
{
$('#timeOutWarningOverlay').show();
startTimer();
}
if (idleTime > 14) { // 14
window.location.href = '/login.aspx';
alert("You session has expired due to no activity.");
}
};
function startTimer() {
countdown = setInterval(countDownClock, 1000);
};
function countDownClock() {
counter = counter - 1
if (counter < 10) {
console.log(counter);
$('#time').text("0" + counter);
}
else {
console.log(counter);
$('#time').text(counter);
}
if (counter == 0) {
counter = 60;
clearInterval(countdown);
console.log(counter);
console.log("done");
}
};
该消息将在14分钟后弹出，并开始为用户倒计时。希望这有帮助，快乐编码。
我建议使用setInterval而不是setTimeout。
类似这样的东西：
<script>
var startTime = new Date(milliseconds),
timeoutLength = 60000;
var interval = setInterval("checkTimeout()",1000);
function checkTimeout() {
var currentTime = new Date(millisecond);
if (currentTime > startTime + timeoutLength) {
clearInterval(interval);
alert ("Your current Session is over due to inactivity.");
}
}
</script>
解决方案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);
});