Question

我有一些浮点数，我想表明最后几位不重要。我的想法是这样的。

编号为273.978

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>

如果有类似“nth-last-chars”CSS选择器的东西，那就太好了。然后我可以在我的CSS文件中设置这一切，而不是在JavaScript中砍掉数字。有没有更好的方法来实现这一目标？

编辑：这是本机JavaScript解决方案的样子：

<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>

<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>

Answer 1

与stef有同样的想法：

<style type="text/css">
    .number {
        font-family: monospace;
    }
    .number:after {
        background-color: rgba(255,255,255,0.5);
        content: "";
        display: inline-block;
        height: 1em;
        width: 1.2em;
        position: relative;
        top: 0.25em;
        right: 1.2em;
    }
</style>

<span class="number">273.978</span>

Answer 2

在jQuery中脱颖而出：

<script type="text/javascript">
$('.numbers').each(function() {
    $(this).html(
        $(this).html().substr(0, $(this).html().length-2)
          + "<span style='color: #3399ff'>"
          + $(this).html().substr(-2)
          + "</span>");
});
</script>

这是展示它的fiddle。我很抱歉这不是简单的JavaScript，但我相信这里的一个人可以提供原生解决方案，如果这不会削减你的玉米。

更新：这是一个非jQuery解决方案，另一个fiddle演示了它。我也把风格打破了CSS。

<style type="text/css">
.unimportant {
    color: #3399ff;
}
</style>

<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
    var html = numberTargets[i].innerHTML;
    numberTargets[i].innerHTML = html.substr(0, html.length-2)
      + "<span class='unimportant'>"
      + numberTargets[i].innerHTML.substr(-2)
      + "</span>";
}
</script>

Answer 3

除了服务器端方法（最简单）之外，您可以添加具有width: 1.75em; background-color: rgba(255,255,255,0.5)的覆盖范围，并将其修复到容器对象的右侧，并将az索引大于主浮动显示对象。< / p>

如果您有实验感，可以尝试使用HTML5 <input type="number" step="0.1" /> element，这取决于浏览器会根据其值舍入到最接近的值。

Answer 4

您可以使用PHP为前3/4字符的span标记添加一个类（我假设您使用php生成这些浮点数），然后使用不同的类添加类，

然后只需将类添加到CSS文件中即可突出显示。

AFAIK没有CSS选择器可以满足您的需要，'nth'选择器更多用于标签，类和ID而不是单个字符。

编辑：在javascript中，这可以通过使用foo.charAt（N）;

来完成

所以将你的字符串加载到var：

var foo=[number generation code];
var foo0=foo.charAt(0);
var foo1=foo.charAt(1);
var foo2=foo.charAt(2);
var foo3=foo.charAt(3);

然后，您可以将字符打印到代码中的适当位置。

是否有一种简单的方法来设置字符串的最后几个字符的样式？

4 个答案: