Question

我设计了一个奖学金捐赠酒吧，并希望随着捐赠金额的增加，酒吧宽度会延长。我目前通过使用CSS更改“宽度”来设置可以扩展的栏。我不熟悉Javascript，但我尝试使用for循环和if语句，以便产生我正在寻找的结果。我正在寻找的结果是一个循环，其中如果提供的捐赠量（整数）是（0 <量<500），则结果将是0.如果提供的捐赠量是（500 <量<1000）结果将是1.如果提供的捐赠金额是（1000 <金额<1500），结果将是2.如果提供的捐赠金额是（1500 <金额<2000），结果将是3.如果提供的捐赠量是（2000 <量<2500），结果将是4.如果提供的捐赠量是（2500 <量<3000），结果将是5。我需要这个结果是一个整数，它将表示我导出的等式的变量，以便确定条形宽度所需的像素数量，以便正确匹配捐赠金额。这是我到目前为止提出的代码。我需要帮助才能实现我的目标。截至目前，代码仅显示最后一个数字。提前谢谢！

<script>
{
    var amount = 1163; //example amount
    var x = 0;

    if (0 < amount < 500) {
        x = 0;
    } if (500 < amount < 1000) {
        x = 1;
    } if (1000 < amount < 1500) {
        x = 2;
    } if (1500 < amount < 2000) {
        x = 3;
    } if (2000 < amount < 2500) {
        x = 4;
    } if (2500 < amount < 3000) {
        x = 5;
    }
        document.write(x)
}
</script>

Answer 1

javascript中的比较不会以这种方式工作。您需要使用ANDS和/或ORS指定每个逻辑比较。

if (0 < amount && amount < 500) { ... } // or x < 500 whichever logical proceed

根据运算符优先级，此值为(0 < 1163 < 500)

这进一步评估为(true < 500)自1 == true以来，这些都是true，因此x将始终为5。

Answer 2

你应该避免逻辑测试并以这种方式优化你的代码，这会给你你期望的结果：
x=Math.round(amount/500+.5)-1;
http://jsfiddle.net/scraaappy/erL37s8k/

Answer 3

要更改您不需要修改CSS的元素的width，您可以使用javascript直接更改它。

document.getElementById("progress").style.width = w + "px";

（假设元素的id为"progress"，并且您想要的像素值为w）。

Answer 4

检查出来.. http://jsfiddle.net/wdth4eme/3/

{
var amount = 1163; //example amount
var x = 0;

if (0 < amount && amount < 500) {
    x = 0;
} if (500 < amount && amount < 1000) {
    x = 1;
} if (1000 < amount && amount < 1500) {
    x = 2;
} if (1500 < amount && amount < 2000) {
    x = 3;
} if (2000 < amount && amount < 2500) {
    x = 4;
} if (2500 < amount && amount < 3000) {
    x = 5;
}
   document.querySelector(".inner").style.width=Math.floor(100/x)+"px";
}

Answer 5

当你知道自己的射程时，

返回。如果它不到一定数量就不能更高。

function getValue(value) {
if(value < 500) return 0;
if(value < 1000) return 1;
if(value < 1500) return 2;
...
...
}

var size = getValue(1235)

//返回2

Answer 6

首先，您需要逻辑运算符以达到匹配目的，例如x> 0 ＆amp;＆amp; x <= 50

让我们在html中说，

#bar { width: 100px; }

在css中，

document.getElementById('bar').style.width= "500px";

or

document.getElementById('bar').style.width= x + "px";

可以通过

访问

margin-left:10px;

如何使用Javascript变量作为CSS宽度的值？

6 个答案: