简单星星评级

前端入坑纪 35

更新时间隔得有些久了，最近手头忙着建站。好，今天来个简单的星星评价效果！

当然拉，其实星星图片你是可以随意换的。

OK，first things first！项目链接

简单星星评级

HTML 结构

    

        
您的评价：
        

            
            
            
            
            
        
    

就是纯粹的放五个a，它们的背景是星星

CSS 结构

        body {
            padding: 0;
            margin: 0;
            background-color: #F4F4F4;
        }
        
        p {
            padding: 0;
            margin: 0;
        }
        
        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: #525252;
        }
        
        img {
            vertical-align: middle;
        }
        
        .fl {
            float: left;
        }
        
        .fr {
            float: right;
        }
        
        .clear::after {
            display: block;
            content: "";
            clear: both;
        }
        
        .mWrp {
            width: 100%;
            margin: 0 auto;
            max-width: 640px;
        }
        
        .mWrp p {
            margin: 6px 0;
            padding: 8px;
        }
        
        #starWrp a {
            display: inline-block;
            height: 30px;
            width: 30px;
            background-image: url(star00.png);
            background-size: 100% auto;
            background-position: center center;
            margin: 0 3px;
        }
        
        #starWrp a.on {
            background-image: url(star10.png);
        }

通过class=“on” 来控制星星的背景点亮

JS 结构

        var stars = document.getElementById("starWrp").getElementsByTagName("a");// 获取所有的a标签
        for (var i = 0; i < stars.length; i++) {
            stars[i].setAttribute("idx", i);// 给每个a添加对应的顺序数字
            stars[i].onclick = function() {
                var vidx = this.getAttribute("idx");//获取当前点击的a 上的顺序数

              // 将所有a标签的星星变空先
                for (var m = 0; m < stars.length; m++) {
                    stars[m].className = "";
                }

                // 将第一个a到点击的a之间的所有星星点亮
                for (var j = 0; j <= vidx; j++) {
                    stars[j].className = "on";
                }
            }
        }

让你们久等了，接下来，准备更新个触摸滑动，可以点亮半个星星的教程。那么有兴趣的同学，可以好好研究一翻，期待你我共同进步！！！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！