将十进制值显示为html框

Question

我得到1到5之间的十进制数，我希望像上面提到的图像一样。例如，此图像显示值3.7

使用html + css

显示它的最佳方式是什么

Answer 1

你可以用UL和一些DIV来做到这一点。

<ul>
<li>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
    <div class="on"></div>
</li>

这是一个简单的例子：

http://jsfiddle.net/EfpPr/5/

显然你只需要一点点javascript / jQuery来根据需要设置DIV开启/关闭。

Answer 2

根据您尚未发布的标记，我会选择2张背景图片。一个带有红色条，另一个带有所有盒子，中间是透明的。然后，通过一些计算（将1-5范围映射到百分比或像素），您只需使用background-position移动红色条。

当酒吧最终落在其中一个不透明区域后面时你不会看到差异，但这不是太糟糕，是吗？

Answer 3

假设您可以将小数转换为百分比，这对纯CSS来说是可行的。或者，您可以使用一小段JavaScript来set/adjust the percentage value。

IE7 +，Chrome等

示例1

简单示例，没有脚本，最小标记：http://jsfiddle.net/GqK6p/6/

<强> HTML

<div id="progress"></div>
<ul id="mask">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<强> CSS

#wrapper { position: relative; height: 30px; width: 180px; }
#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; width: 74%; height: 100%; }
#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }

示例2

更精致的例子，允许每个盒子的内部样式：http://jsfiddle.net/GqK6p/2/

这也显示了条形图使用基于百分比的宽度。

<强> HTML

<div id="wrapper">
    <div id="progress"></div>
    <ul id="mask">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>  
</div>

<强> CSS

#wrapper { position: relative; height: 30px; width: 180px; }

/* set width to whatever percentage makes sense based on decimal value */

#progress { position: absolute; top: 0; left: 0; z-index: 0; background-color: red; 
    width: 59%; height: 100%; }

#mask { position: absolute; z-index: 1; height: 100%; }
LI { float: left; border: 4px solid #aaa; height: 22px; width: 22px; }
LI > DIV { border: 1px solid #555; height: 20px; }

示例3

这是一个动画变体，显示了如何使用JavaScript动态调整进度条的宽度：http://jsfiddle.net/GqK6p/4/

var progress = $("#progress");
var width = 0; // use whatever starting value makes sense

setInterval(function(){

    // increment/process as desired
    if( ++width > 100 ){
         width = 0;
    }        

    progress.css("width",  width + "%");       
}, 25);​

HTML 5进度元素

作为旁注，HTML 5 progress元素可能是此类信息的语义选择，但是browser support isn't complete yet，我认为样式{{1}不存在任何功能}}