Question

我一直在谷歌搜索大约一个小时左右试图找到一个接近我正在尝试做的jquery控件（或者我可以调整的控件），但找不到任何。< / p>

也许任何人都可以分享链接或提出不同的方法。我正在努力实现以下目标：

我有一个针对经销商（不是普通大众）的网站。每个经销商都有预定的货币目标。例如，经销商A的目标是59K。经销商B的目标是21K。此外，我们目前有3条规则。

如果已达到客户目标的2％，我们提供20％折扣。
如果达到客户目标的4％，我们提供40％折扣。
如果已达到客户目标的6％，我们提供60％折扣。

我正在尝试找到某种进度条，除了用户当前的金额外，还会显示3条规则。例如：

------ 8K ---------------- | ------------------ | ---- -------------------- |
              20%         40%            60%

8K表示当前登录经销商的当前金额。另一个例子（对于不同的登录经销商）可能是：

--------------------- | ------- 27K ----------- | ----- ------------------- |
            20%           40%             60%

如何创建（或调整）这样的控件？感谢

Answer 1

尝试这样的事情：Live Demo

<强> HTML

<div id="main" >
    <div id="first">20%</div><div id="second">40%</div><div id="third">60%</div>

    <div id="cur">12000</div>
</div>

<强> CSS

#main {
    width:400px;
    height:60px;
    border:1px solid black;
}

#first,#second,#third {
    display:inline-block;
    position: relative;
    left: 0%;
    top:0%;
    height:100%;
    text-align:right;
    font:Courier;
    color:#fff;
    font-size:90%;
    padding-right:4px;
}

#first {
    background: #800;
    width:20%;
}

#second {
    background: #880;
    width:20%;
}

#third {
    background: #080;
    width:20%;
}

#cur {
    display:block;
    float:left;
    position: relative;
    left: 0%;
    top:-65%;
    height:30%;
    width:40%;
    border:1px solid blue;
    background: #fff;
    text-align:right;
    font-family: Courier;
    font-weight:bold;
    padding-right: 4px;
}

<强>的jQuery

$(document).ready(function() {
    function showBar(target, current) {
        perc = current / target * 100;

        console.log(perc);

        l = perc * 4;

        console.log(l);

        $("#cur").css('width', perc + '%');
        $("#cur").text(current);
    }

    showBar(12000, 6000);
});

只需使用目标值和当前值调用showBar。

jQuery评分进度条

1 个答案: