五星好评的三种方法（原生js）

先展示js代码

/*//01
// 获取节点
var starCollection = document.getElementsByClassName('star-item');
//每个元素都要有点击事件，需要循环
for (var i = 0; i <starCollection.length; i++){
    starCollection[i].setAttribute('data-index',i);//设置属性 即编号 0 1 2 3 4
    starCollection[i].onclick = function () {
         /!*console.log(this);//此时this指向starCollection[i] 点击第一个时就获取第一个值 1 依次类推*!/
        var index = +this.getAttribute('data-index');//得到属性 此时获取的是属性 属性默认是字符串 用加号转换成数字
       /!* console.log(index);//点击第一个元素时返回属性0   0 1 2 3 4 *!/
        /!*for (var m = 0; m < starCollection.length; m++){//0 1 2 3 4
            starCollection[m].style.background = 'red';
        }
        for (var j = 0; j <= index;j++){// 0 1 2 3 4
            starCollection[j].style.background = 'green';
        }*!/
        for (var j = 0; j < starCollection.length; j++){
            starCollection[j].style.background = j <= index ? 'green' : '#ccc'
        }
    }
}*/
//02
// 获取星星集合节点
// var starCollection = document.getElementsByClassName('star-item');
// // 获取评价集合节点
// var commentContainer = document.getElementsByClassName('comment-container')[0]
// function changeClassName(dom,className) {
//     dom.className = className;
// }
// var rateMessage = ['极差','差','一般','良好','非常好'];
// for (var i = 0; i < starCollection.length; i ++){
//     starCollection[i].setAttribute('data-index',i);//设置属性 即编号 0 1 2 3 4
//     starCollection[i].onclick = function () {
//         var index = +this.getAttribute('data-index');//得到属性 此时获取的是属性 属性默认是字符串 用加号转换成数字
//         for (var j = 0; j < starCollection.length; j++){
//             if (j <= index){
//                 changeClassName(starCollection[j],'fa fa-star star-item')
//                 //将空心的（-o）替换掉 还原 成实心
//                 //starCollection[j].className = starCollection[j].className.replace(/-o/,'')
//             }else {
//                 changeClassName(starCollection[j],'fa fa-star-o star-item')
//                 //存在的就是实心的 加上-o  成空心
//                 //starCollection[j].className = starCollection[j].className.replace(/(?<=fa-star)\s/g,'-o  ')
//             }
//         }
//     }
// }
//03

function changeClassName(dom,className) {
    dom.className = className;
}

 function rate(rateMessage,shapeClassName){
    var starCollection = [];
    var rateContainer = document.createElement('div');//添加节点div
    rateContainer.className = 'all';// 添加元素名
    var starContainer = document.createElement('div');
    starContainer.className = 'star-container';
    var commentContainer = document.createElement('div');
    commentContainer.className = 'comment-container';

 for (var i = 0;i <rateMessage.length; i++){
     var _span = document.createElement('span');
     //shapeClassName 是所传的形状
     _span.className = 'fa fa-' + shapeClassName+ '-o star-item';
     _span.setAttribute('data-index',i+'');
     starCollection.push(_span);

     _span.onclick = function(){
         var index = +this.getAttribute('data-index');//0//得到属性 此时获取的是属性 属性默认是字符串 用加号转换成数字
         commentContainer.innerText = rateMessage[index];
         for (var j = 0; j < starCollection.length; j++){
             if (j <= index){
                 // console.log('fa fa-star'+ shapeClassName+'star-item')
                 // console.log(starCollection[j]);
                 // starCollection[j].style.background="red";
                 changeClassName(starCollection[j],'fa fa-'+shapeClassName+' star-item')
                 //将空心的（-o）替换掉 还原 成实心
                 //starCollection[j].className = starCollection[j].className.replace(/-o/,'')
             }else {
                  changeClassName(starCollection[j],'fa fa-'+shapeClassName+'-o  '+' star-item')
                 //存在的就是实心的 加上-o  成空心
                 //starCollection[j].className = starCollection[j].className.replace(/(?<=fa-star)\s/g,'-o  ')
             }
         }
     }
     starContainer.appendChild(_span);
 }
    rateContainer.appendChild(starContainer);
    rateContainer.appendChild(commentContainer);
    document.body.appendChild(rateContainer);
 };
 rate(['极差','差','一般','良好','非常好'],'star');

为了方便理解js的代码就展示个人的html的结构 css样式就自己写啦

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--css reset样式重置-->
    <link rel="stylesheet" href="./normalize.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./star.css">
</head>
<body>
        <div class="all">
        <!--星星集合 container 集合-->
            <!-- fa-star-o 加-o表示空心-->
            <div class="star-container">
                <span class="fa fa-star-o star-item"></span>
                <span class="fa fa-star-o star-item"></span>
                <span class="fa fa-star-o star-item"></span>
                <span class="fa fa-star-o star-item"></span>
                <span class="fa fa-star-o star-item"></span>
            </div>
            <!--评价 comment 评议-->
            <div class="comment-container"></div>
        </div>


</body>
<script src="./star.js"></script>
</html>

最后效果图：五星好评应该都理解 就不用我多说啦