使用js的倒数计时器

Question

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

试过这段代码。

<
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 () 的 return 值具有完全相同的格式。

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

先谢谢了

Answer 1

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

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

Answer 2

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

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>

Answer 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>

使用js的倒数计时器

Countdown timer using js

javascript

timer

countdown