Question

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

function printStars(n)

其中n可以是1,1.25,1.5,1,75等，直到5。

我有不同的星级课程。

<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;
}

Answer 2

您可以将小数字分成2，例如4.5

var x = 4.5
var str=x.toString();
var splited=str.split('.');
var a=new Array();
a=splited;

使用第一个数字（4）a[0]来使用第二个数字（5）a[1]

Answer 3

你可以很容易地得到这两个部分：

＆＃13;

    var n= 3.75;
    var hundreds = Math.floor(n)/1;
    var left = n - Math.floor(n);
    left = left.toString().replace(/0\./, '');
    console.log(hundreds + ',' + left);

＆＃13;

这会给你一个＆＃39; 100＆＃39;的倍数。块和余数将是十进制值。

然后只需添加元素。

Answer 4

＆＃13;

function printStars (){
            
            var starRate = document.getElementById("StarNumber").value;
            
            var html = '';
            
                for(var i = 1; i <= starRate ; i++) {
                    html+="<i class='fa fa-star'> </i>";
                }
                if (starRate.indexOf('.') > -1){
                    html+="<i class='fa fa-star-half'> </i>";
                    i++;
                }
                while(i <= 5) {
                    html+="<i class='fa fa-star-o'></i>";
                    i++;
                }
            console.log(html);
            document.getElementById("StarContent").innerHTML = html;
        }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="StarContent"></div>

        <input type="text" id="StarNumber" name="StarNumber">
        <button type="button" onclick="printStars();"> PrintStars </button>

＆＃13;

如何以小数形式打印星星

4 个答案: