14-2星级评分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{font-family: "Microsoft YaHei",serif;}
        body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}
        ol,ul,li{margin: 0;padding: 0;list-style: none;}
        img{border: none}
        #wrap{
            margin: 50px auto;
            width: 400px;
            height: 80px;
            user-select: none;
        }
        #wrap .title,#wrap .list,#wrap .txt{
            float: left;
        }
        #wrap .title{
            color: red;
            line-height: 80px;
        }
        #wrap .list{
            width: 102px;
            height: 20px;
            margin: 30px 20px 0;
        }
        #wrap .list li{
            float: left;
            width: 20px;
            height: 20px;
            background-image: url("img/7.png");
            cursor: pointer;
        }
        #wrap .list li.light{
            background-image: url("img/6.png");
        }
        #wrap .txt{
            width: 120px;
            height: 78px;
            border: 1px dashed #aaa;
        }
    </style>
</head>
<body>
<div id="wrap">
    <span class="title">星际评分：</span>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p class="txt">提示：请认真给当前文章打分</p>
</div>
<script>
    (function () {
        let oUl = document.querySelector("#wrap .list"),
            aLi = document.querySelectorAll("#wrap .list li"),
            oTxt = document.querySelector("#wrap .txt"),
            len = aLi.length,
            index = -1,
            arrText = [
                "提示：请认真给当前文章打分",
                "超级差评",
                "差评",
                "一般",
                "好看",
                "真的好看",
            ];

        //这是aLi的移入事件
        for (let i=0;i<len;i++){
            // 鼠标移入事件
            aLi[i].onmouseenter = function () {

                for (let j=0;j<len;j++){
                    aLi[j].className = (j<=i)?"light":"";
                }
                oTxt.innerHTML = arrText[i+1];

                //可以改写为三目运算
                // for (let j=0;j<len;j++){
                //     if (j<=i){
                //         aLi[j].className = 'light';
                //     } else {
                //         aLi[j].className = '';
                //     }
                // }

                // 下面性能更佳，不涉及判断
                // // 从0到移入序号的aLi加名字
                // for(let j=0;j<=i;j++){
                //     aLi[j].className = 'light';
                // }
                // // 从移入序号到最大长度去掉名字
                // for(let j=i+1;j<len;j++){
                //     aLi[j].className = '';
                // }
            };
            aLi[i].onclick = function () {
                index = i;
            };
        }

        //这是ul的移出事件
        oUl.onmouseleave = function () {
            for (let i=0;i<len;i++){
                aLi[i].className = i<=index?"light":"";
            }
            oTxt.innerHTML = arrText[index+1];
        }

    })();
</script>
</body>
</html>
猜你喜欢
