javascript显示倒数秒数

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

var modal=document.getElementById（'session-timeout'）；
var timeCount=document.getElementById（'time-remain'）；
var span=document.getElementsByClassName（“关闭”）[0]；//获取关闭模态的元素
var extendSession=document.getElementById（“扩展会话”）；//获取扩展按钮
var sessionTimeout=；//设置超时-临时设置为4分钟（即240000毫秒）
var区间；
功能倒计时（时间）{
变量单位='秒'；
间隔=设置间隔（函数（）{
如果（time您的
setInterval
语法有问题。参数必须是函数和时间（以毫秒为单位），此函数将针对每个间隔执行。因此，请更改逻辑，将函数作为参数，而不是可执行代码

我还做了一些修改，只处理一个函数


//在过去2分钟内显示模式窗口
函数modalPopUp（时间）{
var remainingTime=time-60000；//时间以毫秒为单位
var timeCount=document.getElementById（'time-remain'）；
setTimeout（function（）{//向用户显示模式并显示剩余时间
document.getElementById（'modalID'）.style.display='block'；
setInterval（函数（）{
时间=时间-1000；//每秒钟减少一次
timeCount.innerHTML=（时间/1000）%60；
}, 1000);
}，剩余时间）；
}
modalPopUp（60000）；//显示模态。

×
会话超时
您的会话即将在中过期，您将注销


延长会话

您的
设置间隔
语法有问题。参数必须是函数和时间（以毫秒为单位），此函数在每个间隔执行。因此，请更改逻辑，将函数作为可执行代码的参数

我还做了一些修改，只处理一个函数


//在过去2分钟内显示模式窗口
函数modalPopUp（时间）{
var remainingTime=time-60000；//时间以毫秒为单位
var timeCount=document.getElementById（'time-remain'）；
setTimeout（function（）{//向用户显示模式并显示剩余时间
document.getElementById（'modalID'）.style.display='block'；
setInterval（函数（）{
时间=时间-1000；//每秒钟减少一次
timeCount.innerHTML=（时间/1000）%60；
}, 1000);
}，剩余时间）；
}
modalPopUp（60000）；//显示模态。

×
会话超时
您的会话即将在中过期，您将注销


延长会话

设置间隔

需要一个回调函数作为第一个参数：

setInterval（函数，以毫秒为单位的间隔）

您可以尝试的是：

• 创建一个var，保存会话到期前的时间（

  var secondsRemaining

  ）
• 创建1000毫秒（1秒）的间隔
• 在间隔回调中，将

  secondsRemaining

  减少1
• 在span

  #剩余时间

为了使其更为奇特，并符合您的示例，您可以检查是否在间隔回调中显示剩余的

秒数

或

分钟数

如果

secondsRemaining

大于60，您还有

secondsRemaining/60

分钟

在本例中，我使用了100毫秒的间隔，因此您无需等待分钟：）

---

设置间隔

需要一个回调函数作为第一个参数：
setInterval（函数，以毫秒为单位的间隔）

您可以尝试的是：


创建一个var，保存会话到期前的时间（
var secondsRemaining
）
创建1000毫秒（1秒）的间隔
在间隔回调中，将
secondsRemaining
减少1
在span
#剩余时间

为了使其更为奇特，并符合您的示例，您可以检查是否在间隔回调中显示剩余的
秒数
或
分钟数

如果
secondsRemaining
大于60，您还有
secondsRemaining/60
分钟

在本例中，我使用了100毫秒的间隔，因此您无需等待分钟：）

函数
setInterval（callbackfunction，interval\u in\u ms）
希望函数作为第一个参数，而不是计算。它返回的值是您刚刚创建的间隔的内部索引（而不是剩余时间，我认为您正期待它）。您还将倒计时函数的返回值指定给函数
setInterval（callbackfunction，interval_in_ms）中元素的innerHTML（未定义，因为您实际上没有返回任何内容）
需要一个函数作为第一个参数，而不是一个计算。它返回的值是您刚刚创建的间隔的内部索引（而不是剩余时间，我认为这是您所期望的）。您还需要将倒计时函数的返回值赋给元素的innerHTML（这是未定义的，因为您实际上没有返回任何内容）是的，这似乎工作正常！一个