评分转化成星星

js

/*
 * 评分转化成星星
 * 参数
    number 分值，0-5
 * 说明
    1、 小数 <= 3 为灰色； < 8 半星; >= 8 整星
    2、 星星的样式根据具体情况修改
 */
function startNumUpdate(number){
    if (!number){
        return;
    }
    number = number.toFixed(1) + "";
    var arr = [];
    // 判断全星
    var integer = Number(number.split(".")[0]);
    for(var j = 0;j < integer;j++){
        arr.push(1)
    }
    // 判断半星
    var decimal = Number(number.split(".")[1]);
    if(decimal){
        console.log(decimal)
        if(decimal <= 3){
            arr.push(0)
        }else if(decimal < 8){
            arr.push(2)
        } else{
            arr.push(1)
        }
    }
    // 判断灰色星星
    if(5 - arr.length > 0){
        var n = 5 - Number(arr.length)
        for(var m = 0;m < n;m++){
            arr.push(0)
        }
    }
    // 遍历arr
    var startList = ""
    for(var i = 0;i < arr.length;i++){
        // 整个星星
        if(arr[i] == 1){
            startList += "<span class='QuanStart'></span>"
        }
        // 半个星星
        if(arr[i] == 2){
            startList += "<span class='HalfStar'></span>"
        }
        // 灰色星星
        if(arr[i] == 0){
            startList += "<span class='ZeroStart'></span>"
        }
    }
    return startList
}
startNumUpdate(3.31);       // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='ZeroStart'></span><span class='ZeroStart'></span>
startNumUpdate(3.31);       // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='HalfStar'></span><span class='ZeroStart'></span>
startNumUpdate(3.6);        // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='HalfStar'></span><span class='ZeroStart'></span>
startNumUpdate(3.29);       // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='HalfStar'></span><span class='ZeroStart'></span>
startNumUpdate(3.25);       // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='HalfStar'></span><span class='ZeroStart'></span>
startNumUpdate(3.8);        // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='ZeroStart'></span>
startNumUpdate(3.9);        // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='ZeroStart'></span>
startNumUpdate(5.0);        // <span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span><span class='QuanStart'></span>

作者 wendy
2019 年 6月 5日