javascript在倒计时中显示秒数

javascript display seconds in countdown

本文关键字：显示 倒计时 javascript      更新时间：2023-10-26

我有一个模式窗口，它会弹出，让用户知道他的会话将在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);
}

我怎样才能做好这项工作？

setInterval需要一个回调函数作为第一个参数：CCD_ 2。

你可以尝试的是：

  • 创建一个var，保存会话到期前的时间（var secondsRemaining）
  • 在1000MS（1秒）上创建一个间隔
  • 在间隔回调中，将secondsRemaining减少1
  • 在跨度#time-remain中显示secondsRemaining的值

为了让它更美观，并且更符合您的示例，您可以检查在间隔回调中显示seconds remaining还是minutes remaining。

如果secondsRemaining高于60，则还有secondsRemaining / 60分钟。

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

https://jsfiddle.net/upkmg80r/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>

相关文章：