js 点击星星打分代码

<div id="star">
	<span>点击星星就能打分</span>
	<ul>
		<li><a href="javascript:;">1</a></li>
		<li><a href="javascript:;">2</a></li>
		<li><a href="javascript:;">3</a></li>
		<li><a href="javascript:;">4</a></li>
		<li><a href="javascript:;">5</a></li>
	</ul>
	<span></span>
	<p>选择解释</p>
</div>

 <style>
        body {
            color: #666;
            font: 12px/2 Arial;
        }

        #star {
            margin: 10px auto;
            /* border: 1px solid red; */
            width: 800px;
            position: relative;
            /*设置定位给p标签参考*/
        }

        ul {
            list-style-type: none;
            /* border: 1px solid green; */
            margin: 0px 10px;
            /*必须设置外边距才能上去*/
        }

        ul,
        span {
            float: left;
        }

        ul li {
            float: left;
            background: url('./images/star2.png') no-repeat;
			background-position: 0 -69px;
            text-indent: -9999px;
            /* 隐藏a标签中的文本 */
            width: 30px;
			height: 30px;
            margin: 0px;

        }

        #star li.on {
            background-position: 0 0;
        }

        /* span {
            border: 1px solid yellow; 
        } */

        p {
            /*后面要根据鼠标变动,更改p,所以要设置定位*/
            /* border: 1px solid blue;  */
            position: absolute;
            top: 20px;
            width: 200px;
            display: none;
        }

        p em {
            color: #f60;
            display: block;
            font-style: normal;
        }

        strong {
            color: #f60;
            padding-left: 20px;
        }
    </style>
	
	<script>
	/*
	"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
    "不满意|部分有破损，与卖家描述的不符，不满意",
    "一般|质量一般，没有卖家描述的那么好",
    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
	*/
	var msg = [
	"很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
    "不满意|部分有破损，与卖家描述的不符，不满意",
    "一般|质量一般，没有卖家描述的那么好",
    "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
    "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
	];
    //获取元素
    let ul = document.querySelector('ul');
    let lisObj = document.querySelectorAll('li');
    let span = ul.nextElementSibling;
    let p = document.querySelector('p');
    let score = 0;
    // 循环设置事件
    lisObj.forEach((li, key) => {
        // console.log(li,key);
        //鼠标移入事件
        li.onmouseover = overFn.bind(li, key);
        //鼠标移出事件
        li.onmouseout = outFn;
        //鼠标点击事件
        li.onmousedown = downFn.bind(li, key);
    })
    //鼠标移入事件--p显示移动，星星高亮
    function overFn(k) {
        //p显示
        //p.style.display = 'block';
        //p的位置
        p.style.left = this.offsetLeft + 'px';
        heightLightStar(k + 1);
        let tmpMsg = msg[k].split('|');
        p.innerHTML = `<strong>${tmpMsg[0]}</strong><br>${tmpMsg[1]}`;
    }
    //鼠标移出
    function outFn() {
        p.style.display = 'none';
        heightLightStar();
    }
    //鼠标点击事件
    function downFn(k) {
        //取消p的显示
        p.style.display = 'none';
        //将对应的评价转换为字符串
        let tmpMsg = msg[k].split('|');
        //将评价添加到页面
        //span.innerHTML = '<strong>${tmpMsg[0]}</strong>${tmpMsg[1]}';
        //记录评价的成绩
        score = k + 1;
		console.log(score);
        //将点击的星星下标加1传递给高亮函数
        heightLightStar(score);
    }
    //星星高亮
    function heightLightStar(key) {
        let tmpKey = key || score;
        for (let i = 0; i < lisObj.length; i++) {
            lisObj[i].className = i < tmpKey ? 'on' : '';
        }
    }
	</script>