Question

这是我在HTML页面上显示1分钟倒计时时间的代码：

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 1;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining
    if (seconds < 59) {
        seconds.value = secs;
    } else {
        minutes.value = getminutes();
        seconds.value = getseconds();
    }
    secs--;
    setTimeout('Decrement()',1000);
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
</head>
<body>
    <input id="minutes" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight:bold;">m 
<input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;">s
</body></html>

我想显示一条警告信息，显示＆＃34; Time over＆＃34;当倒计时达到0m 0s并且当用户点击提醒框的ok按钮时，该页面应重定向到example.html。我怎样才能做到这一点？

编辑：我这样做了 -

function Decrement() {
if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining
    if (seconds < 59) {
        seconds.value = secs;
    } else {
        minutes.value = getminutes();
        seconds.value = getseconds();
    }

    if (minutes==0 && seconds==0){
        if (window.confirm('Time over'))
        {
            window.location="http://www.example.com";
        }
        else
        {
            window.location="http://www.example.com";
        }
    }
    secs--;
    setTimeout('Decrement()',1000);
}

但它不起作用。计数器变为负数而不是在0m 0处要求构象。如何使它工作？

Answer 1

如果您的超时已超过，您可以像这样调用确认功能：

if (window.confirm('The countdown has ended. Redirect?'))
{
    // They clicked Yes
}
else
{
   // They clicked no
}

此功能的其他可能性如下所述：

Confirm

因此，在setTimeout()函数中再次调用Decrement之前，您可以检查分钟和秒是否为零，然后调用确认操作。否则，如果不满足此条件，则继续递减。

修改

您的JavaScript代码中也有一些错误。我已经对它做了一些改进，你可以在这个JsFiddle上看一下：

Countdown

首先，您遇到了问题，因为您从未将分钟和秒数设置回输入。接下来，您没有关闭分钟和秒的标签。我想setTimeout也不起作用，因为传递的字符串。在这些情况下，通常最好使用完整的函数表达式。您可以在JsFiddle中看到更改。

Answer 2

如何使用setInterval()？如下所示：

var timeCount = setInterval(Decrement, 1000);

function Decrement() {
    if (secs === 0) {
        clearInterval(timeCount);
        return;
    }

    if (document.getElementById) {
        minutes = document.getElementById("minutes");
        seconds = document.getElementById("seconds");
        // if less than a minute remaining
        if (seconds < 59) {
            seconds.value = secs;
        } else {
            minutes.value = getminutes();
            seconds.value = getseconds();
    }

    secs--;
}

Answer 3

<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 0;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = 3;

var minutes, seconds;

function countdown() {
  setTimeout('Decrement()',1000);
}

function Decrement() {
    // if less than a minute remaining
    if (seconds < 59) {
        seconds.value = secs;
    } else {
        minutes.value = getminutes();
        seconds.value = getseconds();
    }
    secs--;

    console.log(minutes + ', ' + seconds);
    if (seconds.value <= 0 && minutes.value <= 0) {
          if (window.confirm('timeout')) {
        alert('done');
      } else {
        alert('nothing to do');
      }
    } else {
      setTimeout('Decrement()',1000);
    }
}

function getminutes() {
  // minutes is seconds divided by 60, rounded down
  mins = Math.floor(secs / 60);
  return mins;
}

function getseconds() {
  // take mins remaining (as seconds) away from total seconds remaining
  return secs-Math.round(mins *60);
}

// It's necessary
document.onreadystatechange = function() {
  if(document.readyState == "complete") {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");

    countdown();
  }
}

</script>
</head>
<body>
    <input id="minutes" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight:bold;">m 
    <input id="seconds" type="text" style="width: 26px; border: none; background-color:none; font-size: 16px; font-weight: bold;">s
</body>
</html>

如何在倒计时结束时在javascript中显示提醒？

3 个答案:

修改