Question

我有一个弹出的模态窗口，让用户知道他的会话即将在N秒内过期。我想要做的是向用户显示剩余时间，因此消息将类似于

"Your session is about to expire in 2 minutes" // if remaining time is more than 1 minute, then display it in minutes else in seconds - if possible
...
"Your session is about to expire in 50 seconds"
...
"Your session is about to expire in 15 seconds"
...

这是我的代码

<div class="modal-content">

        <div class="modal-header">
            <span class="close">×</span>
            <h2>Session timeout</h2>
        </div>

        <div class="modal-body">
            <p>Your session is about to expire in <span id="time-remain"></span> and you will be logged out.</p>
            <p><button class="btn blue" id="extend-session">Extend Session</button></p>
        </div>

    </div>

这是javascript

var modal = document.getElementById('session-timeout');
    var timeCount = document.getElementById('time-remain');
    var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
    var extendSession = document.getElementById("extend-session"); // Get the extend button
    var sessionTimeout = <?php echo config_item('session-timeout'); ?>; // set timeout - temporarily set to 4 mins ( i.e. 240000 ms)

var interval;

function countDown(time) {

    var unit = 'seconds';

    interval = setInterval(function () {
        if (time <= 0) {

            // logout when session expires
            setTimeout(function () {
                alert('Logout!');
                // window.location = "<?php echo admin_url('auth/logout'); ?>";
            }, time);


            clearInterval(interval);
        }

        // reduce each second
        time = time - 1000;
        timeVal = (time / 1000) % 60;

        if (time >= 60) {
            // if time (seconds) are 60 or more show time as minutes
            unit = 'minutes';
            timeVal = Math.floor(timeVal / 60);
        }

        timeCount.innerHTML = timeVal + ' ' + unit;

    }, 1000);
}

// Show the modal window in last 2 minutes
function modalPopUp(time) {
    var remainingTime = time - 120000; // in my example is 240000 - 120000 (i.e. 4-2=2 mins)

    setTimeout(function() {

        // show modal
        modal.style.display = 'block';
        countDown(remainingTime);

    }, remainingTime);
}

function sessionExpire(time) {
    modalPopUp(time);
}

我该如何正常工作？

Answer 1

setInterval需要回调函数作为第一个参数： setInterval(function, interval in MS)。

你可以尝试的是：

创建一个包含时间的var，直到会话到期（var secondsRemaining）
在1000MS（1秒）
，将secondsRemaining减少1
在范围secondsRemaining

#time-remain

为了使它更具花哨性，您可以检查是否在间隔回调中显示seconds remaining或minutes remaining。

如果secondsRemaining高于60，则剩余secondsRemaining / 60分钟。

在这个例子中，我使用了100MS的间隔，所以你不需要等待几分钟:)

https://jsfiddle.net/upkmg80r/2/

Answer 2

您的setInterval语法存在问题。 参数必须是函数和时间（以毫秒为单位），此函数将针对每个间隔执行。因此，更改逻辑以将函数作为setinterval的参数而不是可执行代码。

我还做了一些改变，只处理一个函数。以下是摘录。

// Show the modal window in last 2 minutes
function modalPopUp(time) {

  var remainingTime = time - 60000; // time is in miliseconds
  var timeCount = document.getElementById('time-remain');

  setTimeout(function() { // show the modal and display the remaining time to the user
   
    document.getElementById('modalID').style.display = 'block';
    setInterval(function(){         
      time= time - 1000; //reduce each second
      timeCount.innerHTML = (time/1000)%60;
    }, 1000);
  }, remainingTime);
}

modalPopUp(60000); //show modal.

<div id="modalID" class="modal-content" style="display:none;">

  <div class="modal-header">
    <span class="close">×</span>
    <h2>Session timeout</h2>
  </div>

  <div class="modal-body">
    <p>Your session is about to expire in <span id="time-remain"></span> and you will be logged out.</p>
    <p>
      <button class="btn blue" id="extend-session">Extend Session</button>
    </p>
  </div>

</div>

javascript在倒计时中显示秒数

2 个答案: