js星星评分

最新推荐文章于 2022-01-28 16:59:58 发布

原创最新推荐文章于 2022-01-28 16:59:58 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了如何使用JavaScript创建一个星星评分系统，包括鼠标移过时点亮星星和显示评分，以及点击星星固定评分的功能。详细讲解了获取元素、DOM操作以及评分文字的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果详解
1. 鼠标移上的时候星星点亮，下面的文字显示。鼠标移出的时候星星为灰，下面文字不显示。
2. 鼠标移到某个星星上，它之前的所有星星都会亮。
3. 鼠标移到某个星星上并点击，会显示打分结果。

先获取元素

var words = ["满意", "一般满意", "还不错", "很满意", "非常满意"];
        // 获取所有的空星星
        var divstars=document.getElementById('divstars');
        //获取divword   
        var divword=document.getElementById('divword');
        // 设置初始值为-1，
        var start=-1;

进行dom操作，首先鼠标移入让自己和前面的亮

 divstars.onmouseover=function(e){
            if(e.target.tagName==='IMG'){
                e.target.src='images/shining.png';
                divword.innerHTML=words


                var before=e.target.previousElementSibling;
                while(before){
                    before.src='images/shining.png';
                    before=before.previousElementSibling;
                }


                var next=e.target.nextElementSibling;
                while(next){
                    next.src='images/empty.png';
                    next=next.nextElementSibling
                }

文字的评分

 for(var i=0;i<divstars.children.length;i++){
                    if(divstars.children[i]===e.target){
                        divword.innerHTML=words[i];
                    }
                }

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .left {
            float: left;
            margin-left: 10px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="divstars" class="left">
        <img src="images/empty.png" alt="1">
        <img src="images/empty.png" alt="2">
        <img src="images/empty.png" alt="3">
        <img src="images/empty.png" alt="4">
        <img src="images/empty.png" alt="5">
    </div>
    <div id="divword" class="left">

    </div>
    <script>
        var words = ["满意", "一般满意", "还不错", "很满意", "非常满意"];
        // 获取所有的空星星
        var divstars=document.getElementById('divstars');
        //获取divword   
        var divword=document.getElementById('divword');
        // 设置初始值为-1，
        var start=-1;
        // 鼠标移入时让自己和前面的亮
        divstars.onmouseover=function(e){
            if(e.target.tagName==='IMG'){
                e.target.src='images/shining.png';
                divword.innerHTML=words


                var before=e.target.previousElementSibling;
                while(before){
                    before.src='images/shining.png';
                    before=before.previousElementSibling;
                }


                var next=e.target.nextElementSibling;
                while(next){
                    next.src='images/empty.png';
                    next=next.nextElementSibling
                }

                 // 文本评分
                for(var i=0;i<divstars.children.length;i++){
                    if(divstars.children[i]===e.target){
                        divword.innerHTML=words[i];
                    }
                }
            }
        }
       
        // 鼠标移出后，图片复原之前
        divstars.onmouseout=function(e){
            if(start==-1){
                // 如果没有改变，直接全部变暗
                for(var i=0;i<divstars.children.length;i++){
                divstars.children[i].src='images/empty.png'
                    }
             }else{
                //  如果点击了一个图片
                //  找出所有图片 判断每一张图片是否在之前 或者之后 做变化
                 for(var j=0;j<this.children.length;j++){
                    if(j<=start){
                        this.children[j].src='images/shining.png';
                       
                    }
                    else{
                        this.children[j].src='images/empty.png';
                    }
                 }
             }
        }


        // 给定鼠标点击绑定事件，获取点到了哪一个图片
        divstars.onclick=function(e){
            if(e.target.tagName==="IMG"){
                for(var i=0;i<divstars.children.length;i++){
                    if(divstars.children[i]===e.target){
                        start=i;
                    }
                }
            }
        }
        </script>
</body>

</html>