心心评分简单实现

最新推荐文章于 2024-06-11 23:18:43 发布

diaoju8121

最新推荐文章于 2024-06-11 23:18:43 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-Steven/p/7892875.html

版权

原创一个用JavaScript实现星星评分效果（附效果图）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            section {
                width: 500px;
                height: 200px;
                margin: 100px auto;
                border-radius: 10px;
                background: pink;
                overflow: hidden;
            }
            
            .up {
                height: 70%;
                background-color: bisque;
                padding-left: 160px;
                box-sizing: border-box;
                line-height: 140px;
            }
            
            span {
                cursor: pointer;
                font-size: 40px;
            }
            
            strong {
                font-size: 20px;
                vertical-align: top;
                color: royalblue;
            }
            
            .down {
                height: 30%;
                background-color: plum;
                text-align: center;
                line-height: 60px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var span = document.querySelectorAll('span');
                var strong = document.querySelector('strong');

                arrText = ['青铜', '白银', '黄金', '铂金', '钻石']

                for(i = 0; i < span.length; i++) {
                    span[i].index = i;
                    siteIndex = -1;
                    span[i].onmouseover = function() {
                        //鼠标移开的时候让span颜色恢复

                        //先给每个span都加上鼠标移入效果
                        for(i = 0; i < span.length; i++) {
                            //控制鼠标移入到第（this.index）的span时，小于this.index的span颜色改变，否则不改变颜色。
                            //if套if
                            if(i <= this.index) {
                                //控制鼠标移入前两个span颜色为pink，移入第三个时颜色变成red。
                                if(this.index <= 1) {
                                    span[i].style.color = 'pink';
                                } else {
                                    span[i].style.color = 'red';
                                }
                            } else {
                                span[i].style.color = '';
                            }
                        }
                        strong.style.display = 'inline';
                        strong.innerHTML = arrText[this.index];
                    }

                    span[i].onmouseout = function() {
                        for(i = 0; i < span.length; i++) {
                            span[i].style.color = '';
                        }
                        strong.style.display = 'none';

                        if(siteIndex > -1) {
                            for(i = 0; i < span.length; i++) {
                                //控制鼠标移入到第（this.index）的span时，小于this.index的span颜色改变，否则不改变颜色。
                                //if套if。
                                if(i <= siteIndex) {
                                    //控制鼠标移入前两个span颜色为pink，移入第三个时颜色变成red。
                                    if(siteIndex <= 1) {
                                        span[i].style.color = 'pink';
                                    } else {
                                        span[i].style.color = 'red';
                                    }
                                } else {
                                    span[i].style.color = '';
                                }
                            }
                            strong.style.display = 'inline';
                            strong.innerHTML = arrText[siteIndex];
                        }

                    }

                    span[i].onclick = function() {
                        //记录被点击的位置
                        siteIndex = this.index;
                    }
                }
            }
        </script>

    </head>

    <body>
        <section>
            <div class="up">
                <span style="">♥</span>
                <span style="">♥</span>
                <span style="">♥</span>
                <span style="">♥</span>
                <span style="">♥</span>
                <strong style="display: none;">钻石</strong>
            </div>
            <div class="down">小提示：点击星星就能评分</div>
        </section>
    </body>

</html>

转载于:https://www.cnblogs.com/-Steven/p/7892875.html

diaoju8121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
心心评分简单实现

原创一个用JavaScript实现星星评分效果（附效果图）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ...
复制链接

扫一扫