Question

现在，我正在制作一个非常简单的网页直播时钟。我想在小时和分钟之间制作“：”以隐藏一秒钟，然后取消隐藏下一个。

以下是代码：

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  var per = h * 60 + m;
  m = checkTime(m);
  h = checkTime(h);
  s = checkTime(s);
  var am = " am";
  var pm = " pm";

  if (h > 12) {
    h = (h - 12)
    document.getElementById('time').innerHTML = h + ":" + m + ":" + s + pm.sup();
  } else {
    document.getElementById('time').innerHTML = h + ":" + m + ":" + s + am.sup();
  }
    var t = setTimeout(function(){startTime()},500);
}


function checkTime(i) {
    if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;


}

Answer 1

使用此方法的一种方法

new Date().toLocaleTimeString()

它会自动将时间转换为与您类似的格式。

<强> http://codepen.io/anon/pen/ZGrLXo

整个js代码：

var ele = document.getElementById('time'), blink, str;
setInterval(function(){
    str = new Date().toLocaleTimeString();
    ele.innerText = (blink = !blink)?str:str=str.replace(/:/g," ");
},500);

Answer 2

将闪烁的:字符opacity的css值设置为0和1之间的每秒秒。所以，如果你的blinker DOM元素看起来像这样：

<span id="blinker">:</span>

您的代码可能如下所示：

var opacity = 1;

setInterval(function(){
    var blinker = document.getElementById("blinker");
    blinker.style.opacity = opacity == 1 ? 0 : 1; //This is a ternary operator, acting as an alternator 
}, 1000);

希望这有帮助！

Answer 3

对于时钟，您的 HTML 应如下所示：

<div>
<span id="hours"></span>
<span id="blinker"></span>
<span id="minutes></span>...
</div>

<强>的JavaScript

var hours = document.getElementById("hours");
hours.innerHTML = ...
var minutes = document.getElementById("minutes");
minutes.innerHTML = ...

闪光灯：

<span id="blinker">:</span>

对于JavaScript，您需要一个获取 CSS值

的函数

getComputedStyle(el, null).getPropertyValue(val)

切换：

setInterval(function () {
    var blinker = document.getElementById("blinker");
    var val = window.getComputedStyle(blinker, null).getPropertyValue("display");
    switch (val) {
        case "block":
            blinker.style.display = "none";
            break;
        case "none":
            blinker.style.display = "block";
            break;
    }

}, 1000);

Blinker example

以下是您的代码的完整解决方案。那里我不使用显示块。相反，我使用不透明度，因为您使用块更改位置。

在startTime（）函数之外单独使用 setInterval ：

setInterval(function() { f(); }, 1000);

Complete solution

如何“动画”/隐藏然后取消隐藏java脚本中的字符串？

3 个答案: