倒数计时器javascript分钟到几小时

时间:2015-02-06 02:54:38

标签: javascript countdown

我是JavaScript的初学者,我写了一个倒计时器,但我不知道如何将分钟转换成小时。我认为它并不难,但我不能这样做,每当我写新行时它都不起作用。这是我的代码:

var minutesRemaining;
var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
  //hide pause button by default
  document.getElementById("pauseArea").style.display = "none";
  //hide resume button
   document.getElementById("resumeArea").style.display = "none";

}


function resumeCountdown() {
  tick();
  intervalHandle = setInterval(tick, 1000);
   //hide resume button when resuming
  document.getElementById("resumeArea").style.display = "none";
  //show resume button;
  document.getElementById("pauseArea").style.display = "block";
  return;
}

function pauseCountdown() {
  clearInterval(intervalHandle);
  document.getElementById("pauseArea").style.display = "none";
  document.getElementById("resumeArea").style.display = "block";
  return;
}





function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
      sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Done!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
  //show pause when running
  document.getElementById("pauseArea").style.display = "block";
}



window.onload = function () {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Idő megadása');
  //pause button
  var pauseButton = document.getElementById("pauseBtn");
  pauseButton.onclick = function() {
    pauseCountdown();
  };

  //resume button
  var resumeButton = document.getElementById("resumeBtn");
  resumeButton.onclick = function() {
    resumeCountdown();
  };
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Indítás');
  startButton.onclick = function () {
    startCountdown();
  };

  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
  document.getElementById("pauseArea").appendChild(pauseButton);
 document.getElementById("resumeArea").appendChild(resumeButton);

  //hide pause button by default
  document.getElementById("pauseArea").style.display = "none";
  //hide pause button by default
  document.getElementById("resumeArea").style.display = "none";

};

1 个答案:

答案 0 :(得分:0)

这就是我刚刚写得非常快的内容。它可能会帮助你。但是你可以做一些基本的数学运算来获得你的转换并处理其余部分。像这样:

function countDown(future_date_in_millis) {

    var date = new Date();
    var current_time = date.getTime();

    //get the future date and time
    var future_date = future_date_in_millis.getTime(); //1438077258047; //date.getTime();

    // get the duration in milliseconds
    // 1 day = 86400000 millis
    var duration = future_date - current_time;

    var dd = Math.floor(duration / 86400000);
    var remainder = duration % 86400000;
    var hh = Math.floor(remainder / 3600000);
    remainder = remainder % 3600000;
    var mm = Math.floor(remainder / 60000);
    remainder = remainder % 60000;
    var ss = Math.floor(remainder / 1000);
    var days = document.getElementById("dd");
    var hours = document.getElementById("hh");
    var minutes = document.getElementById("mm");
    var seconds = document.getElementById("ss");

    days.innerHTML = dd.toString();
    hours.innerHTML = hh.toString();
    minutes.innerHTML = mm.toString();
    seconds.innerHTML = ss.toString();
}
window.setInterval(function () {
    /// call your function here
    var d = new Date("July 15, 2015 4:52:00 PM");
    countDown(d);
}, 1000);