创建用于在 asp.net 中显示评级星级的评级系统

Question

我有这样的值 1.25、2.50、3.75 或 4.00:

我可以循环使用 1、2、3 或 4 等整数。

但是我如何在 3.75 上循环播放？

for (int i = 0; i < 3.75; i++)
{
    // my logic
}

已更新：

我在创建评级系统并循环显示评级星时需要的循环。例如：

如果为 1.25，则为星 1 和星 2 的四分之一 (0.25)。或者如果为 4.75，则为星 4 和星的最后四分之一 (0.75)。

3.75/5

如何显示星级评分？

您的帮助对我来说非常宝贵！提前致谢！

Answer 1

只使用double类型的循环变量:

for (double x = 1.25; x <= 4; x += 1.25)
{
    // Your logic
}

Answer 2

虽然通常在 double 上循环不是一个好主意，尤其是当您在循环中检查相等性时，在您的情况下没关系，因为您的循环增量可以精确地表示为幂的组合2. 具体来说，1.25 是 2⁰+2^-2.

for (double i = 0 ; i < 6 ; i+=1.25) {
    // my logic
}

或者，您可以在 int 上循环，然后将循环计数器乘以 1.25：

for (int i = 1 ; i <= 4 ; i++) {
    double val = 1.25 * i;
    //
}

I'm creating a rating system and displaying the rating stars in loop.

你不需要循环。如果你有一个介于 0 和 5 之间的数字，包括 0 和 5，代表平均值，你需要知道三件事：

要显示多少 "filled" 星，
部分填充星的填充部分有多大，
要显示多少 "blank" 星。

您可以使用数学找出这三个问题的答案：

星数"filled"为截断后的整数部分
部分填充星号的分数是数字的小数部分
"blank"星数为5-ceil(n)，其中ceil(n)表示该数的"ceiling"（即最小的int等于或大于n).

Answer 3

准备2个图片文件，一个有5个空星，一个有5个实心星，就像：

两张图片的宽度和高度必须相同，例如400X70
将实心星星重叠在空心星星上，然后将实心星星裁剪到与Rating相同的原点部分，

即作物 div 宽度 = image_width / 5 * 评级

例如评分为 3.5 时，宽度 = 400 / 5 * 3.5 = 280

  <html>
  <head><title>test</title>
      <style type="text/css">
        .container > * {
            position: absolute;
        }

        .container, .crop {
            height: 70px;
        }

        .crop {
            overflow: hidden;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <img src="https://i.stack.imgur.com/yiT2y.png" />
        <!-- the width could be calculated either at server or client side, or define in css -->
        <div class="crop" style="width:280px">
            <img src="https://i.stack.imgur.com/oTi9e.png" />
        </div>
    </div>
 </body>
 </html>

Answer 4

您可以迭代接受值列表而不是迭代浮点数。如果您不想手动编辑已知值，一种生成它们的方法是：

IEnumerable<float> CalculateBreakpoints(int min, int max, short unitPartitions)
{
    var fraction = 1f / unitPartitions;
    for (float i = min; i <= max; i += fraction)
    {
        yield return i;
    }
}

在野外，您的评级不太可能与您的已知值完全匹配。您可以尝试选择最接近手头评级的已知值或以其他方式接近它。例如，亚马逊会显示高于实际评级的最接近值。可以这样做：

float MapRatingToBreakpoint(float rating, IEnumerable<float> breakpoints)
{
    var min = breakpoints.Min();
    var max = breakpoints.Max();

    if (rating < min || rating > max)
    {
        throw new ArgumentOutOfRangeException(nameof(rating));
    }

    foreach (var point in breakpoints)
    {
        if (rating <= point)
        {
            rating = point;
            break;
        }
    }

    return rating;
}

处理评级后，要在前端显示星星，此代码将能够选择要使用的星星类型：

for (let i = 1; i <= 5; ++i) {
    if (i <= Math.floor(rating)) {
        console.log("addFullStar()");
    }
    else if (i > Math.ceil(rating)) {
        console.log("addEmptyStar()");
    }
    else {
        fraction = rating - i + 1;
        console.log(`addPartialStar(fraction: ${fraction}`);
    }
}

此时，您可以选择如何显示每种类型的星星。您可以使用具有所有不同星星的精灵并使用 CSS 类（例如 <span class="star-0-25" />）来附加正确的图像。显示部分星形的另一种选择是在彼此的顶部添加满星和空星，空星隐藏溢出，满星可见溢出并调整父标签的宽度。

创建用于在 asp.net 中显示评级星级的评级系统

creating a rating system for displaying rating stars in asp.net

asp.net

.net

webforms

rating

已更新：