尝试将计时器格式化为 5:00 而不是 500

Question

我正在尝试制作一个计时器，它真的很好用。

我应该如何在数字之间加上 :，这是一种简单的方法吗？

它目前这样显示 500 并且倒计时并且工作正常。我希望它像这样显示 5:00 有什么简单的方法可以快速输入那个字符吗？

我只想让它从五分钟倒计时到零。

或者我是否必须以不同的方式格式化计时器才能做到这一点。

var timer;

var time = 500;

function startTimer() {
  timer = setInterval(countdown, 1000);
}

function countdown() {
  time--;

  var timeText = document.getElementById('timer');

  if (time === 499) {
    time = 459;
  } else if (time === 399) {
    time = 359;
  } else if (time === 299) {
    time = 259;
  } else if (time === 199) {
    time = 159;
  } else if (time === 99) {
    time = 59;
  }


  if (time > 0) {
    timeText.innerHTML = time;
  } else {
    clearInterval(timer);
    timeText.innerHTML = 'end';
  }
}

function nextPage() {
  clearInterval(timer);
  sessionStorage.setItem('timerem', time);
  window.open('02page2.html', "_self");
}

function loadTimer() {
  var timeText = document.getElementById('timer');
  if (sessionStorage.getItem('timerem') === null) {
    timeText.innerHTML = 'ERROR';
  } else {
    time = sessionStorage.getItem('timerem');
    timeText.innerHTML = time;
    timer = setInterval(countdown, 1000);
  }
}

startTimer()

<span id="timer"></span>

Answer 1

怎么样

const formatTime = num => (num/100).toFixed(2).replace(".",":");

const formatTime = num => (num/100).toFixed(2).replace(".",":");


var timer;

var time = 500;

function startTimer() {
  timer = setInterval(countdown, 1000);
}

function countdown() {
  time--;

  var timeText = document.getElementById('timer');

  if (time === 499) {
    time = 459;
  } else if (time === 399) {
    time = 359;
  } else if (time === 299) {
    time = 259;
  } else if (time === 199) {
    time = 159;
  } else if (time === 99) {
    time = 59;
  }


  if (time > 0) {
    timeText.innerHTML = formatTime(time);
  } else {
    clearInterval(timer);
    timeText.innerHTML = 'end';
  }
}

function nextPage() {
  clearInterval(timer);
  sessionStorage.setItem('timerem', time);
  window.open('02page2.html', "_self");
}

function loadTimer() {
  var timeText = document.getElementById('timer');
  if (sessionStorage.getItem('timerem') === null) {
    timeText.innerHTML = 'ERROR';
  } else {
    time = sessionStorage.getItem('timerem');
    timeText.innerHTML = formatTime(time)
    timer = setInterval(countdown, 1000);
  }
}

startTimer()

<span id="timer"></span>

没有页面更改和会话存储的较短代码版本 - 会话存储不会运行在堆栈片段中。

这是使用实际时间

const timeText = document.getElementById('timer');
let timer;
let time = 5*60*1000; // 5 minutes in millisecs

function startTimer() {
  clearInterval(timer); // in case of restart
  timer = setInterval(countdown, 1000);
}

function countdown() {
  time-=1000;

  const mmss = new Date(time).toISOString().substr(14, 5)

  if (time > 0) {
    timeText.textContent = mmss
  } else {
    clearInterval(timer);
    timeText.innerHTML = 'end';
  }
}
startTimer()

<span id="timer"></span>

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

var timer;

var time = 500;

function startTimer() {
  timer = setInterval(countdown, 1000);
}

function countdown() {
  time--;

  var timeText = document.getElementById('timer');


  if (time > 0) {
    timeText.innerHTML = (time/100).toFixed(2).replace(".",":");
  } else {
    clearInterval(timer);
    timeText.innerHTML = 'end';
  }
}

function nextPage() {
  clearInterval(timer);
  sessionStorage.setItem('timerem', time);
  window.open('02page2.html', "_self");
}

function loadTimer() {
  var timeText = document.getElementById('timer');
  if (sessionStorage.getItem('timerem') === null) {
    timeText.innerHTML = 'ERROR';
  } else {
    time = sessionStorage.getItem('timerem');
    timeText.innerHTML = (time/100).toFixed(2).replace(".",":");
    timer = setInterval(countdown, 1000);
  }
}

startTimer()


</script>
</head>
<body>

<span id="timer"></span>

</body>
</html>

尝试将计时器格式化为 5:00 而不是 500

Trying to format timer like 5:00 instead of 500

javascript

timer