03 CSS 五星评分

最新推荐文章于 2024-08-22 14:38:51 发布

学前端的坤坤bond

最新推荐文章于 2024-08-22 14:38:51 发布

阅读量323

点赞数 3

文章标签：编辑器 vscode ide javascript json CSS CSS3

本文链接：https://blog.csdn.net/m0_64904350/article/details/140549167

版权

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .star,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .star {
            height: 30px;
        }

        li {
            float: left;
            height: 27px;
            width: 27px;
            background: url('./imgs/star.gif');
        }
    </style>
</head>

<body>
    <div class="score">
        <ul class="star">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="text">

        </div>
    </div>
    <script>
        // 五星评分需求分析
        // 1 鼠标移入⭐ 对应的⭐以及前面⭐都高亮，后面的⭐不亮
        // 2 打几星时分别显示的不同的文字
        // 3 鼠标点击星星 对应的星星都高亮 后面的不亮
        // 4 鼠标一旦移出 星星回到上一次点击的时候的效果
        class Score {
            constructor(selector) {
                // 评分容器
                let container = document.querySelector(selector)
                // 实例对象上有一个记录所以li的属性
                this.liS = container.querySelectorAll('li')
                // 实例对象上有一个记录text的属性
                this.textBox = container.querySelector('.text')
                this.ul = container.querySelector('ul')
                this.textArr = ['不推荐', '一般般', '还可以', '推荐', '巨推荐']
                this.index = null
                this.init()
            }
            init() {
                this.addMouseEnterEvent()
                this.addClickEvent()
                this.addMouseLeaveEvent()
            }
            addMouseEnterEvent() { // 鼠标移入
                // console.log(this)
                // 循环给每一个li绑定点击事件
                for (let i = 0; i < this.liS.length; i++) {
                    // console.log(this,'没有绑定事件的this')
                    this.liS[i].onmouseenter = () => {
                        // console.log(this)
                        // 自己以及前面的星星变亮
                        for (let j = 0; j <= i; j++) {
                            this.liS[j].style.backgroundPosition = '0px -27px'
                        }

                        // 重新评分 
                        for (let j = i + 1; j < this.liS.length; j++) {
                            this.liS[j].style.backgroundPosition = '0px 0px'
                        }

                        // 显示文字
                        this.textBox.innerText = this.textArr[i]
                    }
                }
            }

            // 鼠标点击
            addClickEvent() {
                for (let i = 0; i < this.liS.length; i++) {
                    this.liS[i].onclick = () => {
                        this.index = i
                        // console.log(this.index)
                    }
                }
            }
            // 鼠标移出
            addMouseLeaveEvent() {
                this.ul.onmouselrave = () => {
                    for (let j = 0; j <= this.index; j++) {
                        this.liS[j].style.backgroundPosition = '0px -27px'
                    }
                    for (let j = this.index + 1; j < this.liS.length; j++) {
                        this.liS[j].style.backgroundPosition = '0px 0px'
                    }
                }
            }
        }

        let starS = new Score('.score')
    </script>
</body>

</html>