Pod względem wydajności polecam piekło span
.
<span id="string"><span id="h">12</span><span class="h">h</span><span id="m">12</span><span class="m">m</span><span id="s">12</span><span class="s">s</span></span>
Jedno przęsło dla każdego h
, m
i s
liter, dzięki czemu można projektować je poprawnie (można stosować takie same lub różne stylizacji dla każdego).
I kolejna rozpiętość dla każdego numeru, dzięki czemu można buforować odniesienia. Podsumowując, oto JS na bardzo uproszczonym zegar czasu lokalnego:
//cache number container element references
var h = document.getElementById('h'),
m = document.getElementById('m'),
s = document.getElementById('s'),
//IE feature detection
textProp = h.textContent !== undefined ? 'textContent' : 'innerText';
function tick() {
var date = new Date(),
hours = date.getHours(),
mins = date.getMinutes(),
secs = date.getSeconds();
h[textProp] = hours < 10 ? '0'+hours : hours;
m[textProp] = mins < 10 ? '0'+mins : mins;
s[textProp] = secs < 10 ? '0'+secs : secs;
}
tick();
setInterval(tick, 1000);
Fiddle
To ilustruje podstawową ideę buforowane selektorów. Nie odtwarzając ponownie elementów, masz również dobry wzrost wydajności.
Jednak raz na sekundę nie jest to bardzo ciężka praca dla czegoś tak prostego (chyba że masz setki zegarów na swojej stronie).
Bo coś takiego nie istnieje. Prawdopodobnie przeczytałeś go z bloga sugerującego jego implementację - zobacz http://css-tricks.com/a-call-for-nth-everything/ i przewiń w dół do ":: nth-letter()/:: last -letter()/:: nth-last-letter() "- i tak, możesz to łatwo osiągnąć za pomocą JS. –
@ FabrícioMatté, miałem przeczucie ... Czy mógłbyś zaproponować inny sposób robienia tego (js zakładam), który byłby wystarczająco wydajny, by być uruchamiany w każdej sekundzie? – n0pe
Może coś takiego http://codepen.io/FWeinb/pen/djuIx –