1

我已经用谷歌搜索了大约一个小时左右，试图找到一个接近我想要做的事情的 jquery 控件（或者我可以调整的控件），但找不到任何东西。

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

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

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

我试图找到某种进度条，除了用户当前的数量之外，它还会显示 3 条规则。例子：

------8K----------------|------------------|-------- -----------------|

              20%         40%            60%

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

---------|--------27K------------|-------- ----------------|

            20%           40%             60%

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

4

1 回答 1

0

尝试这样的事情：现场演示

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使用目标值和当前值调用即可。

于 2013-02-04T16:24:03.093 回答