C# 会话超时的javascript倒数计时器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9755706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript countdown timer for session timeout
提问by
I want to alert the user that the session timeout is about to expire. I want to have a popup with an OK button and show the seconds ticking down on the popup. Can i do this with just java script? Im OK with using C# code behind also.
我想提醒用户会话超时即将到期。我想要一个带有 OK 按钮的弹出窗口，并在弹出窗口上显示秒数。我可以只用 java 脚本来做到这一点吗？我也可以使用 C# 代码。
Right now it detects session timeout and pops up telling them the session has expired.
现在它检测会话超时并弹出告诉他们会话已过期。
<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>
采纳答案by Hristo
Yes, you can do this via JavaScript. Here's a simple counter implementation that was inspired from this StackOverflow answerI found a while back:
是的，您可以通过 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();
}
}
};
... and an example of how to use it:
...以及如何使用它的示例：
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();
Once the server is ready to alert the user, just create the timer and it'll start counting down. You can customize what happens on each event: when timer starts, when a second ticks by, and when the countdown is done.
一旦服务器准备好提醒用户，只需创建计时器，它就会开始倒计时。您可以自定义每个事件发生的事情：计时器开始时、一秒过去时以及倒计时完成时。
回答by Steve
I would recommend using setInterval instead of setTimeout.
我建议使用 setInterval 而不是 setTimeout。
Something like this:
像这样的东西：
<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>
回答by AtLeastTheresToast
I found this solution to be very helpful. You will need to set your authentication timeout in the web.config file of your project to support this but I also added the option for a user to continue their session if they would like.
我发现这个解决方案非常有帮助。您需要在项目的 web.config 文件中设置身份验证超时以支持这一点，但我还为用户添加了一个选项，如果他们愿意，可以继续他们的会话。
add the following to your Master HTML page in the head tag:
将以下内容添加到您的主 HTML 页面的 head 标记中：
<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>
right under the start of the body tag
就在 body 标签的开头
<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>
Now the JavaScript to handle this. I like using Jquery so this is mostly in Jquery but you can get the idea from the approach. This example is for a 15 minute timeout. Remember you need to update your web.config file authentication timeout.
现在 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");
}
};
The message will pop up after 14 minutes and start to count down the seconds for the user. Hope this helps, happy coding.
该消息将在 14 分钟后弹出并开始为用户倒计时。希望这有帮助，快乐编码。
回答by Jeff.k.Daniel
Solution 1 - Count down Timer
解决方案 1 - 倒数计时器
First just simple make countdown timer , code is given below and if you done then simple add windows.location path (redirect page address) .
首先只是简单的倒数计时器，下面给出了代码，如果你完成了，那么简单地添加 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>
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
解决方案 2 - 带按钮的倒计时计时器
HTML :
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 :
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:
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);
});
