Question

如何在分钟和秒钟之间显示冒号标点符号？这两个小时仍然不起作用。这仍是一个非常愚蠢的问题。我希望我的计时器看起来像这个“02:00”，但它只是看起来像这个“02 00”我该如何解决？

 func imageWithSize(image: UIImage,size: CGSize)->UIImage{
    if UIScreen.mainScreen().respondsToSelector("scale"){
        UIGraphicsBeginImageContextWithOptions(size,false,UIScreen.mainScreen().scale);
    }
    else
    {
         UIGraphicsBeginImageContext(size);
    }

    image.drawInRect(CGRectMake(0, 0, size.width, size.height));
    var newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

//Summon this function VVV
func resizeImageWithAspect(image: UIImage,scaledToMaxWidth width:CGFloat,maxHeight height :CGFloat)->UIImage
{
    let oldWidth = image.size.width;
    let oldHeight = image.size.height;

    let scaleFactor = (oldWidth > oldHeight) ? width / oldWidth : height / oldHeight;

    let newHeight = oldHeight * scaleFactor;
    let newWidth = oldWidth * scaleFactor;
    let newSize = CGSizeMake(newWidth, newHeight);

    return imageWithSize(image, size: newSize);
}

// 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);
}

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>

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

2 个答案: