js 鼠标事件实现五星好评

这里只写js

<script>
       //获取div和span
        var aDiv = document.querySelectorAll("div");
        var oSpan = document.querySelector("span");
        //判断是否点击
        var flag = false;
        //存储被点击的div索引
        var count = null;
        for(let i=0;i<aDiv.length;i++){
            //添加鼠标移入事件
            aDiv[i].onmouseover = ()=>{
                //此步看似与46-49作用相同 但别有效果
                for(let j=0;j<aDiv.length;j++){
                    aDiv[j].style.backgroundColor = "white";
                }
                //鼠标悬停的div及之前都变色
                for(let j=0;j<=i;j++){
                    aDiv[j].style.backgroundColor = "yellow";
                }
                //span现行
                oSpan.style.display = "block";
                //添加span内容
                oSpan.innerHTML = i+1;
            }
            //添加手表移除事件
            aDiv[i].onmouseout = ()=>{
                //鼠标移出的同时 span也隐藏
                oSpan.style.display = "none";
                //鼠标移出的时候 颜色都清掉
                for(let j=0;j<aDiv.length;j++){
                    aDiv[j].style.backgroundColor = "white";
                }
                //鼠标移出时 点击的div和它之前的变颜色
                if(flag){
                    for(let j=0;j<=count;j++){
                        aDiv[j].style.backgroundColor = "yellow";
                    }
                }
            }
            //添加鼠标点击事件
            aDiv[i].onclick = ()=>{
                flag = true;
                //获取到被点击div
                count = i;
            }
        }
  </script>