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

时间:2017-12-26 15:23:24

标签: asp.net .net webforms rating

我的值是这样的 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然后是恒星2的恒星1和四分之一(0.25)。或者如果4.75然后是恒星4和恒星的最后一个季度(0.75)。

enter image description here 3.75 / 5

我如何在星星中显示评分?

你的帮助对我很有价值!提前谢谢!

4 个答案:

答案 0 :(得分:3)

  1. 准备2个图像文件,一个有5个空星,另一个有5个满星,就像: enter image description here enter image description here

    2张图像必须具有相同的宽度和高度,例如400X70

  2. 将填充的星星重叠放置在空星上,然后将填充的星星裁剪为原点的一部分,与评级相同,
  3. 即。 crop crop width = image_width / 5 * rating

    e.g。 3.5等级,宽度= 400/5 * 3.5 = 280

    &#13;
    &#13;
      <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>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:2)

虽然在double上循环通常不是一个好主意,特别是当你在循环中检查相等性时,在你的情况下它是正常的,因为你的循环增量可以表示正如2的幂的组合。具体来说,1.25是2 0 +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;
    //
}
  

我正在制作评级系统并在循环中显示评级星。

你不需要循环。如果你有一个0到5之间的数字,包括平均数,你需要知道三件事:

  • 多少&#34;填充&#34;明星要展示,
  • 部分填充星的填充部分有多大,
  • 多少&#34;空白&#34;明星要展示。

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

  • &#34;填充&#34; stars是截断后数字的整数部分
  • 部分填充星的分数是数字的小数部分
  • &#34;空白&#34;星号是5-ceil(n),其中ceil(n)代表&#34;天花板&#34;数字(即最小int等于或高于n)。

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

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

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" />)来附加正确的图像。显示偏星的另一个选项可能是在彼此的顶部添加满星和空星,具有隐藏溢出的空星,具有可见溢出的全星并调整父标记的宽度。