使用js的倒数计时器答案

【问题标题】：Countdown timer using js使用js的倒数计时器
【发布时间】：2019-08-16 18:12:12
【问题描述】：

需要为在线测验创建倒数计时器。定时器应该在用户进入网页后立即启动。

试过这段代码。

<
script >
    var fiveMinutes = 3600;
var display = document.getElementById('time');
var myTimer;

function startTime(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;

    function timer() {
        diff = duration - (((Date.now() - start) / 1000) | 0);
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ":" + seconds;
        if (diff <= 0) {
            display.textContent = "TIME IS UP!";
            clearInterval(myTimer);
        }
    };
    timer();
    myTimer = setInterval(timer, 1000);
}
window.onload = function() {
    startTime(fiveMinutes, display);
};

不需要从当前时刻开始计数，而是从 startTime 变量中指定的日期开始计数。为方便起见，我们考虑一下它与 Date.now() 的返回值的格式完全相同。

我需要得到一个变量，给它一些值（不是Date.now()），并以它为起点

先谢谢了

【问题讨论】：

那又怎样？问题出在哪里？
其实没有问题。我只需要改变一点。我知道怎么做。 “不是从当前时刻开始计数，而是从 startTime 变量中指定的日期开始计数。为了您的方便，我们考虑一下它与 Date.now() 的返回值的格式完全相同。我需要获取一个变量，给它一些值（不是 Date.now()），并以它为起点“

标签： javascript timer countdown

【解决方案1】：

不确定这是否是您要查找的内容，但这是一个简单的倒计时计时器，可在窗口中显示时间。

const display = document.getElementById('time');
const fiveminutes = 5 * 60 * 1000;

function timer(endTime) {
  var myTimer = setInterval(function() {
    let now = new Date().getTime();
    let diff = endTime - now;
    let minutes = Math.floor(diff % (1000 * 60 * 60) / (1000 * 60));
    let seconds = Math.floor(diff % (1000 * 60) / 1000);

    minutes = minutes < 10 ? `0${minutes}` : minutes;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    display.textContent = minutes + ":" + seconds;
    if (diff <= 0) {
      display.textContent = "TIME IS UP!";
      clearInterval(myTimer);
    }
  }, 100);
}

window.onload = timer(new Date().getTime() + fiveminutes);

span {
  font-family: calibri;
  font-size: 4em;
}

<body>
  <span id="time"></span>

【讨论】：

【解决方案2】：

所以我不确定这是否是您要找的。这将在用户进入页面时触发。不过，您的评论令人困惑。您希望它在页面加载时启动还是在基于变量的某个时间启动？

window.onload(function() {
    setTimeout(function() {
    // whatever you want to happen after 3600
    // i.e. disable input fields for quiz
    }, 3600);
}

【讨论】：

谢谢。代码中一切正常，我只需要按照我在代码下面描述的方式进行更改。那是我无法实现的
如果您需要它来触发“定时器应该在用户进入网页后立即启动。”，那么为什么要增加额外的复杂性。创建您正在谈论的内容需要一些想法。您要么需要一个后端服务器来汇集正确的开始时间，要么让 javascript 在浏览器中执行此操作。我建议您重新考虑解决此问题的方法。

【解决方案3】：

这是我一直在做的事情，我在这里尝试为您提供解决方案。它仍然是错误的，但也许它会给你一些想法，当我有更多时间时，我会尝试编辑它。（我希望它现在可以工作，但需要休息一下。）

const
  timeInput = document.getElementById("timeInput"),  
  nowBtn = document.getElementById("nowBtn"),
  durationInput = document.getElementById("durationInput"),
  confirmBtn = document.getElementById("confirmBtn"),
  display = document.getElementById("display");

let
  startTime,
  timeRemaining,
  chronos;


document.addEventListener("click", setUpTimer);
timeInput.addEventListener("focus", ()=>{ nowBtn.checked = false; });

function setUpTimer(event){
  
  // Makes sure the button was the target of the click before proceeding
  if(event.target == confirmBtn){
    if(nowBtn.checked){ // Puts the current time in the time input
      const
        clickTime = new Date(),
        hours = clickTime.getHours();
      let minutes = clickTime.getMinutes();
      clickTime.setSeconds(clickTime.getSeconds() + 1);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      timeInput.value = `${hours}:${minutes}`;
    }
    const
      timeInputValue = timeInput.value,
      durationInputValue = durationInput.value;
    // Validates input (or complains and aborts)
    if(!timeInputValue || !durationInputValue){
      display.innerHTML = "Please choose a start time and duration"
      clearInterval(chronos);
      return;
    }
    const
      startArray = timeInputValue.split(":"),
      startHours = parseInt(startArray[0]),
      startMinutes = parseInt(startArray[1]),
      durationInMinutes = parseInt(durationInput.value),
      now = new Date();

    // Updates global variables that `countdown` function will need
    timeRemaining = durationInMinutes * 60;
    startTime = new Date();
    startTime.setHours(startHours, startMinutes);
    // In case startTime is supposed to be tomorrow
    const
      nowHrs = now.getHours(),
      strtHrs = startTime.getHours()
      nowMins = now.getMinutes(),
      strtMins = startTime.getMinutes();
    // If it looks like the hour already passed, it's probably an earlier hour tomorrow
    if(strtHrs < nowHrs || (strtHrs == nowHrs && strtMins < nowMins)){
      startTime.setDate(startTime.getDate() + 1);
    }

    // Announces successful timer setup and resets inputs
    const
      displayedHours = startTime.getHours(),
      storedMinutes = startTime.getMinutes(),
      displayedMinutes = storedMinutes < 10 ? "0" + storedMinutes : storedMinutes;
    display.innerHTML = `A ${durationInMinutes}-minute timer will start ` +       `at ${displayedHours}:${displayedMinutes}`;
    timeInput.value = "";
    nowBtn.checked = false;
    durationInput.value = "5";



    // `setInterval` calls `countdown` function every second

    console.log(startTime.toLocaleString());
    clearInterval(chronos);
    chronos = setInterval(countdown, 1000);

  }
}

function countdown(){

  if(timeRemaining <= 0){
    display.innerHTML = "TIME IS UP!";
    clearInterval(chronos);
  }
  else{
    const now = new Date();
    if(now.getTime() >= startTime.getTime()){
      updateDisplayedTime(timeRemaining--);
    }
  }
}

function updateDisplayedTime(totalSeconds){
  let
    minutes = Math.floor(totalSeconds / 60),
    seconds = totalSeconds % 60;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  display.innerHTML = `${minutes}:${seconds}`;
}

.inputContainer{ margin-bottom: 1em; }
#display{ font-size: 1.7em;}
#nowBtn {margin-left: 1em; }

<div class="inputContainer">
  <label>
    <div>Start timer at: </div>
    <input type="time" id="timeInput" />
  </label>
  <label>
    <input type ="checkbox" id="nowBtn" />
    <span>Now</span>
  </label>
</div>
<div class="inputContainer">
  <label>
    <div>Duration (minutes): </div>
    <input type="number" value="5" id="durationInput" min="1" max="1440" />
  </label>
</div>
<div class="inputContainer">
  <button id="confirmBtn">Confirm</button>
</div>
<div id="display"></div>

【讨论】：