冒号“：”没有出现在我的计时器中

Question

如何让我的分和秒之间出现冒号标点符号？两个小时了，还是不行。这是一个非常愚蠢的问题，但仍然如此。我希望我的计时器看起来像这样“02:00”，但它看起来像这样“02 00”我该如何解决？

// set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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

function colorchange(minutes, seconds) {
  if (minutes.value == "00" && seconds.value == "59") {
    minutes.style.color = "orange";
    seconds.style.color = "orange";
    doispontos = "orange";

  } else if (minutes.value == "00" && seconds.value == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "red";
  }

}

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();
    }
    colorchange(minutes, seconds);

    secs--;
    if (secs < 0) {
      secs--;
      clearTimeout(timeout);
      return;
    }
    countdown();
  }
}

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

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

<div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>

Answer 1

这是您的代码的一个工作示例

http://jsfiddle.net/dimshik/tpLg3osL/

我只是将它添加到 <span> 标签中

Answer 2

您正在使用固定定位的内联样式。因此，您在它们之间添加的任何内容都需要具有相似的样式。例如使用 span 标签：

<div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span>
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>

// set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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

function colorchange(minutes, seconds) {
  if (minutes.value == "00" && seconds.value == "59") {
    minutes.style.color = "orange";
    seconds.style.color = "orange";
    doispontos = "orange";

  } else if (minutes.value == "00" && seconds.value == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "red";
  }

}

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();
    }
    colorchange(minutes, seconds);

    secs--;
    if (secs < 0) {
      secs--;
      clearTimeout(timeout);
      return;
    }
    countdown();
  }
}

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

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

<div id="timer">
  <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;">
  <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span>
  <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;">
</div>

或者，您可以通过将 CSS 移动到 HEAD 来简化 HTML 标记或放入单独的文件中。此外，这里确实没有必要使用 input，因为您只是显示文本。

<div id="timer">
  <span id="minutes"></span>
  <span>:</span>
  <span id="seconds"></span>
</div>

// set minutes
var mins = 2;
var down = true;
// calculate the seconds (don't change this! unless time progresses at a                 different speed for you...)
var secs = mins * 60;
var timeout;
var doispontos = ":";

countdown();

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

function colorchange(minutes, seconds) {
  if (minutes.innerText == "00" && seconds.innerText == "59") {
    minutes.style.color = "orange";
    seconds.style.color = "orange";
    doispontos = "orange";

  } else if (minutes.innerText == "00" && seconds.innerText == "30") {
    minutes.style.color = "red";
    seconds.style.color = "red";
    doispontos = "red";
  }

}

function Decrement() {
  if (document.getElementById) {
    minutes = document.getElementById("minutes");
    seconds = document.getElementById("seconds");
    // if less than a minute remaining

    if (seconds < 59) {
      seconds.innerText = secs;

    } else {
      minutes.innerText = getminutes();
      seconds.innerText = getseconds();
    }
    colorchange(minutes, seconds);

    secs--;
    if (secs < 0) {
      secs--;
      clearTimeout(timeout);
      return;
    }
    countdown();
  }
}

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

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

#timer {
  width: 90%;
  border: none;
  background-color: none;
  font-size: 300px;
  font-weight: bold;
  position: fixed;
  bottom: 30%;
  right: -5%;
}

<div id="timer">
  <span id="minutes"></span>
  <span>:</span>
  <span id="seconds"></span>
</div>

冒号“：”没有出现在我的计时器中

Colon " : " doesnt appear in my timer

javascript

timer

countdown