html - 将十进制值显示为 html 框

Question

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

使用它显示它的最佳方式是什么html + css

Answer 1

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

当条形图最终位于其中一个不透明区域的后面时，您不会看到任何差异，但这还不错，是吗？

Answer 2

您可以使用 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 3

假设您可以将小数转换为百分比，这对于纯 CSS 是可行的。或者，您可以使用一小段 JavaScript 来设置/调整百分比值。

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 5progress元素可能是此类信息的语义选择，但浏览器支持还不完整，我认为不存在任何样式的功能progress。