10

私は持っている：

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

h、 、mおよびをs他のテキストよりも小さくしようとしています。cssの疑似要素について聞いたnth-letterことがありますが、機能していないようです。

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

JavaScript を使用して文字列を解析し、文字を周囲spanのタグに置き換えて、タグのスタイルを設定できることはわかっています。ただし、文字列は毎秒更新され、多くの場合、リソースを集中的に使用する解析のようです。

4

4 に答える 4

8

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>

h、mおよび文字ごとに 1 つのスパンで、s適切にスタイルを設定できます (それぞれに同じスタイルまたは異なるスタイルを適用できます)。

また、番号ごとに別のスパンを使用して、参照をキャッシュできます。要約すると、非常に単純化されたローカル タイム クロックの JS は次のとおりです。

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

フィドル

これは、キャッシュされたセレクターの基本的な考え方を示しています。要素を再作成しないことで、パフォーマンスも大幅に向上します。

ただし、非常に単純なものの場合、1 秒に 1 回というのはそれほど重い作業ではありません (ページに何百もの時計がある場合を除きます)。

于 2013-04-14T00:37:27.200 に答える
3

これは、javascript と jQuery を使用してこれを行うための長い道のりかもしれませんが、可能な解決策は次のとおりです。

h, m&を元の文字列から分離しsます。

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

#string次に、CSS を使用して範囲内のスタイルを設定できます。

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

上記を示すデモ フィドルを次に示します。

于 2013-04-14T00:23:28.890 に答える
3

これは文字をスパンでスローするだけで、すべて同じクラスを与えます。多分名誉ある言及に値するでしょう笑:-)

jsフィドル

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] = "<span class='smaller'>" + chars[i] + "</span>";
    }
}
str.innerHTML = chars.join('');

HTML:

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

CSS:

.smaller {
    font-size: 10px;
}
于 2013-04-14T01:05:20.407 に答える
1

CSS を使用し、各文字をスパンタグでラップするシンプルなソリューション:

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

于 2016-10-21T08:36:23.983 に答える