Как «Анимация»/Скрыть, а затем показать строку в 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

Один из способов сделать это с помощью этого метода

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

Установите значение CSS вашего мигания : персонажа opacity к alernate между 0 и 1 с каждым вторым. Так что, если ваш поворотник 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

Вот полное решение с вашим кодом. Там я не использую блок отображения. Вместо этого я использую непрозрачность, потому что вы меняете позицию с блоком. setInterval отдельный, за пределами вашей STARTTIME функции

Использование():

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

Complete solution