会话超时的javascript倒计时器

Question

我想提醒用户会话超时即将到期.我想要一个带有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>

Answer 1

是的,您可以通过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();

一旦服务器准备好提醒用户,只需创建计时器,它就会开始倒计时.您可以自定义每个事件发生的事情:计时器启动时,秒钟滴答时间以及倒计时结束时.

Answer 2

我发现这个解决方案非常有帮助。您需要在项目的 web.config 文件中设置身份验证超时来支持这一点，但我还添加了用户可以继续会话的选项（如果他们愿意）。

将以下内容添加到您的 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>

就在 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> 

现在由 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 分钟后弹出，并开始为用户倒计时秒数。希望这有帮助，编码愉快。