javascript - 如何以小数形式打印星星

Question

我有一个函数，假设参数为整数或小数

function printStars(n)

其中 n 可以是 1,1.25,1.5,1,75 等，最多 5。

我为明星设置了不同的类(class)。

<i class="icon icon-star-0 margin-right-5 size-icon-15"></i> (empty)
<i class="icon icon-star-25 margin-right-5 size-icon-15"></i> (25% filled)
<i class="icon icon-star-50 margin-right-5 size-icon-15"></i> (50% filled)
<i class="icon icon-star-75 margin-right-5 size-icon-15"></i> (75% filled)
<i class="icon icon-star-100 margin-right-5 size-icon-15"></i> (100% filled)

我想要一个代码，如果我输入像 printStars(3.75) 这样的数字，我会给我字符串

<i class="icon icon-star-100 margin-right-5 size-icon-15"></i>
<i class="icon icon-star-100 margin-right-5 size-icon-15"></i>
<i class="icon icon-star-100 margin-right-5 size-icon-15"></i>
<i class="icon icon-star-75 margin-right-5 size-icon-15"></i>

我编写了代码，但它不处理小数。有人可以指导我吗？这是我当前的代码。

function printStars(n){
    var str=n.toString();
    var splited=str.split('.');
    var a=new Array();
    var html = '';
    a=splited;
    if (a[1]==undefined){
        a[1] = '0';
    }
    if (a[0]>0){
        var filled = Number(a[0]) + Number(1);
    } else {
        var filled = Number(a[0]);
    }

    var left = Number(5) - Number(filled);

    if (a[0]>0){
        for (var i = 1; i <= filled-1; i++){
            if (i==1){
                html += '<i class="icon icon-star-100 margin-left-5"></i>';
            } else {
                html += '<i class="icon icon-star-100"></i>';
            }

        }
        html += '<i class="icon icon-star-'+a[1]+'"></i>';
        for (var i = 1; i <= left; i++){
            html += '<i class="icon icon-star-0"></i>';
        }
    } else {
        for (var i = 1; i <= filled; i++){
            if (i==1){
                html += '<i class="icon icon-star-100 margin-left-5"></i>';
            } else {
                html += '<i class="icon icon-star-100"></i>';
            }
        }
        for (var i = 1; i <= left; i++){
            html += '<i class="icon icon-star-0"></i>';
        }
    }

    return html;

    console.log('filled:'+filled);
    console.log('left:'+left);

}

但对于低于 1 的数字不起作用。

Answer 1

function printStars(n){
    setItem('rating',n);

    var wholestars = Math.floor(n); //Round down to nearest whole
    var extrastar = (Math.round((n-wholestars) * 4) / 4).toFixed(2); //Round to nearest 0.25 (- wholestars)
    var emptystars = 5-Math.ceil(n); //Get empty stars

    var html = '';
    count = 1;

    // Whole Stars
    for (var i = 1; i <= wholestars; i++){
        html += '<i class="icon icon-star-100" onclick="fillstars('+count+')"></i>';
        count++;
    }
    // Extra Star
    if(extrastar!=0) {
        html += '<i class="icon icon-star-'+((extrastar*100).toString())+'" onclick="fillstars('+count+')"><i>';
        count++;
    }
    // Empty Stars
    for (var i = 1; i <= emptystars; i++){
        html += '<i class="icon icon-star-0" onclick="fillstars('+count+')"></i>';
        count++;
    }


    return html;
}