Question

我有一个很好的js时钟，但我不知道如何在小时和分钟之间使分频器闪烁。这是http://www.ricocheting.com/code/javascript/html-generator/digital-clock的样子，这里是代码

{{ some_var }}

Answer 1

好吧我根据剧本的作家建议制作了简单的动画分隔符gif来解决它。

Answer 2

目前尚不清楚确切想要闪烁的DOM对象，但从概念上讲，您可以在visibility: hidden和visibility: visible的CSS样式之间交替使用DOM对象。由于您每秒都在更新时间，因此每次更新时间时都可以切换可见性状态。

更改可见性状态只会使冒号不可见，但它仍占用页面布局中相同的空间量（这会使其显示为闪烁）。您可以阅读有关可见性样式属性here on MDN的信息。

使用此代码，只需更改此内容：

<img src="dgc.gif">

到此：

<img class="separator" src="dgc.gif">

对于要闪烁的每个冒号。

// initialize visibility state
var vToggle = true;

function dotime(){ 
    var d=new Date();
    var hr=d.getHours(),mn=d.getMinutes(),se=d.getSeconds();

    // set AM or PM
    document.ampm.src=((hr<12)?dgam.src:dgpm.src);

    // adjust from 24hr clock
    if(hr==0){hr=12;}
    else if(hr>12){hr-=12;}

    document.hr1.src = getSrc(hr,10);
    document.hr2.src = getSrc(hr,1);
    document.mn1.src = getSrc(mn,10);
    document.mn2.src = getSrc(mn,1);
    document.se1.src = getSrc(se,10);
    document.se2.src = getSrc(se,1);

    // now toggle the visibility of the separator
    vToggle = !vToggle;
    var vis = vToggle ? "visibile" : "hidden";
    console.log(vis);
    var items = document.querySelectorAll(".separator");
    for (var i = 0; i < items.length; i++) {
        items[i].style.visibility = vis;
    }
}

Answer 3

这是一个快速草图，使用黑色背景替换你应该使用的黑色图像：

dg = new Array();
var pref = 'http://www.ricocheting.com/static/code/javascript/digital-clock/';
dg[0] = new Image();
dg[0].src = pref + "dg0.gif";
dg[1] = new Image();
dg[1].src = pref + "dg1.gif";
dg[2] = new Image();
dg[2].src = pref + "dg2.gif";
dg[3] = new Image();
dg[3].src = pref + "dg3.gif";
dg[4] = new Image();
dg[4].src = pref + "dg4.gif";
dg[5] = new Image();
dg[5].src = pref + "dg5.gif";
dg[6] = new Image();
dg[6].src = pref + "dg6.gif";
dg[7] = new Image();
dg[7].src = pref + "dg7.gif";
dg[8] = new Image();
dg[8].src = pref + "dg8.gif";
dg[9] = new Image();
dg[9].src = pref + "dg9.gif";
dgam = new Image();
dgam.src = pref + "dgam.gif";
dgpm = new Image();
dgpm.src = pref + "dgpm.gif";

function dotime() {
  var d = new Date();
  var hr = d.getHours(),
    mn = d.getMinutes(),
    se = d.getSeconds();

  // set AM or PM
  document.ampm.src = ((hr < 12) ? dgam.src : dgpm.src);

  // adjust from 24hr clock
  if (hr == 0) {
    hr = 12;
  } else if (hr > 12) {
    hr -= 12;
  }

  document.hr1.src = getSrc(hr, 10);
  document.hr2.src = getSrc(hr, 1);
  document.mn1.src = getSrc(mn, 10);
  document.mn2.src = getSrc(mn, 1);
  document.se1.src = getSrc(se, 10);
  document.se2.src = getSrc(se, 1);
  
  blink();
}

function getSrc(digit, index) {
  return dg[(Math.floor(digit / index) % 10)].src;
}

function blink() {
  if (document.querySelectorAll('.b')[0].style.visibility != 'visible') {
    document.querySelectorAll('.b')[0].style.visibility = 'visible';
    document.querySelectorAll('.b')[1].style.visibility = 'visible';
  } else {
    document.querySelectorAll('.b')[0].style.visibility = 'hidden';
    document.querySelectorAll('.b')[1].style.visibility = 'hidden';
  }
}

window.onload = function() {
  dotime();  
  setInterval(dotime, 1000);
}

.bh {background: black; width: 8px; height: 24px; position: absolute;z-index:-1}

<div>
    <img src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="hr1"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="hr2"><span class="bh"></span><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dgc.gif" class="b"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="mn1"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="mn2"><span class="bh"></span><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dgc.gif" class="b"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="se1"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dg8.gif" name="se2"><img 
    src="http://www.ricocheting.com/static/code/javascript/digital-clock/dgam.gif" name="ampm"></div>

因此，在最终版本中，您需要在.b函数中的关闭和开启状态之间切换blink src属性。我找不到空白图像，所以我将这些.bh跨度放在图像后面，但你明白了。

如何使分频器在js时钟闪烁

3 个答案: