如何";动画"/在java脚本中隐藏然后取消隐藏字符串

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

本文关键字：隐藏 quot 然后 字符串 取消 动画 如何 java 脚本      更新时间：2023-09-26

现在，我正在为网页制作一个非常简单的实时时钟。我想让"："在小时、分钟和秒之间隐藏一秒钟，然后取消隐藏下一秒钟。

这是代码：

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;

}

使用此方法的一种方法

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

将闪烁的:字符的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);

希望这能有所帮助！

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

闪烁示例

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

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

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

完整解决方案

相关文章：