如何 "Animate" / 隐藏然后取消隐藏 java 脚本中的字符串？

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

设置闪烁 : 角色的 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 2

对于时钟，您的 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

这是包含您的代码的完整解决方案。在那里我不使用显示块。相反，我使用不透明度，因为您使用 block.

更改位置

在 startTime() 函数之外单独使用 setInterval：

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

Complete solution

Answer 3

使用此方法的一种方法

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

如何 "Animate" / 隐藏然后取消隐藏 java 脚本中的字符串？

How to "Animate" / Hide and then Unhide a string in java script?

javascript

time

animation

clock