Le Style de la n-ième lettre au une durée à l'aide de CSS

J'ai:

<span id="string">12h12m12s</span>

et je suis à la recherche pour faire de la h, m et s plus petit que le reste du texte. J'ai entendu parler de la nth-letter pseudo élément en css, mais ça ne semble pas fonctionner:

#string:nth-letter(3),
#string:nth-letter(6),
#string:nth-letter(9) {
    font-size: 2em;
}

Je sais que je pourrais utiliser javascript pour analyser la chaîne et de remplacer la lettre à la périphérie de l' span balises de style et les étiquettes. Cependant, la chaîne est mise à jour chaque seconde et il semble que l'analyse que souvent serait ressource intensive.

Parce que une telle chose n'existe pas. Vous l'avez probablement lu à partir d'un blog, ce qui suggère sa mise en œuvre - voir css-tricks.com/a-call-for-nth-everything et faites défiler jusqu'à "::nth-lettre() / ::dernière lettre() / ::nth-last-lettre()" - et oui, vous pouvez facilement réaliser cela avec JS.
J'ai eu un sentiment... Pourriez-vous suggérer une autre manière de faire (en js je suppose) qui serait assez efficace pour être exécuté à chaque seconde?
Peut-être quelque chose comme ceci codepen.io/FWeinb/stylo/djuIx
J'ai utilisé du JavaScript pour créer une horloge qui utilise des éléments span contenir les heures, les minutes, les secondes. Si vous donnez à chacun de ces éléments span un attribut id unique, vous pouvez simplement utiliser du JavaScript afin de cibler et de mettre à jour le contenu de ce seul élément. La Performance est excellente, et vous pouvez utiliser les CSS pour le style de chaque composant de manière différente.
Ce que je voulais dire est-à-dire avant la boucle: var seconds = document.getElementById('seconds'); ensuite utiliser seconds au lieu de document.getElementById('seconds') l'intérieur de la boucle. Voici un article plus détaillé: phpied.com/dom-access-optimization

OriginalL'auteur n0pe | 2013-04-14

En terme de Performance, je vous recommande un span l'enfer.

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

Une durée pour chaque h, m et s lettres de sorte que vous pouvez le style correctement (peut appliquer le même ou différent style pour chaque).

Et une autre plage pour chaque numéro, de sorte que vous pouvez mettre en cache les références. En somme, voici un JS pour un très simpliste local de l'horloge temps:

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

Violon

Ce qui illustre l'idée de base de la mise en cache des sélecteurs. Par pas de recréer les éléments, vous avez également un bon boost de performance.

Bien que, dès que le deuxième n'est pas très lourd travail pour quelque chose de si simple (sauf si vous avez des centaines d'horloges dans votre page).

Qui a été le plus divertissant intro pour une réponse

OriginalL'auteur Fabrício Matté

Cela pourrait être un de longue haleine façon de faire cela à l'aide de javascript et de jQuery, mais voici une solution possible.

Séparer les h,m & s de la chaîne d'origine.

string = $('#string').text();

hD = string.substr(0,2)
h = "<span>"+string.substr(2,1)+"</span>";
mD = string.substr(3,2)
m = "<span>"+string.substr(5,1)+"</span>";
sD = string.substr(6,2)
s = "<span>"+string.substr(8,1)+"</span>";

finalString = hD + h + mD + m + sD + s;

$('#string').html(finalString);

Ensuite, vous pouvez définir le style de l'enjambe dans #string avec les CSS.

#string{font-size:1.2em}
#string > span{font-size:0.8em}

Ici est un démo de violon en montrant au-dessus de la.

OriginalL'auteur dev

3

Ce ne lance que les lettres s'étend et donne à tous de la même classe. Peut-être vaut une mention honorable lol 🙂

jsFiddle

JavaScript:
```
var str = document.getElementById('string'),
 chars = str.innerHTML.split('');

for (var i = 0; i < chars.length; i++) {
 if (chars[i].match(/[hms]/)) {
 chars[i] = "" + chars[i] + "";
 }
}
str.innerHTML = chars.join(''); 
```
HTML:
```
<body>
 12h12m12s 
</body>
```
CSS:
```
.smaller {
 font-size: 10px;
}
```
En fait, vous pouvez supprimer l'ensemble de la boucle for, et de remplacer la dernière ligne avec:
str.innerHTML=str.innerHTML.replace(/([hms])/gi,'$1');
Le css devient alors: *#chaîne de caractères span{font-size:10px}
Si vous voulez un style individuel, utiliser pour chaque, ce css: *#string durée:nth-of-type(n){...css...}, où n est le nombre ordinal de la durée, et ...css... est-ce que le css que vous voulez pour chaque

OriginalL'auteur orb

Solution Simple avec le CSS et l'emballage de chaque personnage avec une durée de tag:

#text span:nth-child(2) {
  color: #ff00ff;
}

#text span:nth-child(5) {
  color: #00ffff;
}

#text {
  font-size: 20px;
}

<span id="text"><span>H</span><span>e</span><span>l</span><span>l</span><span>o</span></span>

https://jsfiddle.net/f8vffLj0/

OriginalL'auteur Borbo

Vous devez vous connecter pour publier un commentaire.