有没有简单的方法来设计一个字符串的最后几个字符？

我有一些浮点数，我想表明最后几位数字并不重要。我想到的是这样的。有没有简单的方法来设计一个字符串的最后几个字符？

对于数量273.978

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

如果有东西像“第n-最后字符” 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>

来源

2011-01-13 mjhm

CSS唯一的解决办法，或者你会接受JavaScript？ – stef 2011-01-13 22:24:52

CSS会很棒，但我不太乐观，所以我会采用最好的JavaScript解决方案。我使用YUI3，但我不认为这很重要。 – mjhm 2011-01-13 22:30:39

我不认为有一个严格的CSS解决方案。你在这里展示的几乎是我会做的，并会想象任何JavaScript解决方案几乎可以做什么。 – scrappedcola 2011-01-13 22:31:03

把我的头在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>

这里有一个进行论证。对不起，这不是普通的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>

来源

2011-01-13 22:45:08

你可以使用PHP的类添加到span标签的前3/4个字符（我假设你正在使用PHP生成这些浮点数）和不同的类之后，

然后只需将这些类添加到您的CSS文件中即可。 AFIK没有CSS选择器来做你需要的东西，'nth'选择器更多的是标签，类和id，而不是个别的字符。

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

所以你的字符串加载到一个变种：

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

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

来源

2011-01-13 22:33:31

这些数字都是严格的客户端。 – mjhm 2011-01-13 22:40:34

请检查上面的JS代码。 – 2011-01-13 22:42:27

除了服务器端方法（最简单）之外，您可以添加一个覆盖范围，该覆盖范围具有width: 1.75em; background-color: rgba(255,255,255,0.5)，并将其固定在容器对象的右侧并且z索引大于主浮动显示对象。

如果你觉得实验性，你可以尝试HTML5 <input type="number" step="0.1" />element，这取决于浏览器将基于它的值四舍五入到最接近的值。

来源

2011-01-13 22:35:34 stef

有同样的想法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>

来源

2011-01-13 22:45:35 drudge

有没有简单的方法来设计一个字符串的最后几个字符？

回答

相关问题