如何打印在小數

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

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

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

Answer 3

，你可以在你的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 4

你可以得到兩個部分很容易像這樣：

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

這會給你的「100」塊的整數倍，其餘的將是十進制值。

然後只需追加元素。