评分条的实现

最新推荐文章于 2024-08-27 13:32:57 发布

原创最新推荐文章于 2024-08-27 13:32:57 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#评分条

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的鼠标悬停评分效果的实现方式，通过HTML、CSS和JavaScript完成动态评分反馈及不同评分等级的文字提示。该示例展示了如何使用前端技术创建交互式的用户界面元素。

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

效果图：

评分条效果图

<style>
#box{width:140px;height:27px;}
.pox{width:25px;height:25px;border:1px solid #ccc;float:left;}
</style>
<div id="box">
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
    <div class="pox"></div>
</div>
<span>请评分</span>
<script>
var Right=true;//能否评分的依据
for(i=0;i<$('.pox').size();i++){
    $('.pox').eq(i).mouseenter(function(e) {
        if(Right){
            var index=$(this).index();
            $(this).prevUntil('#box').css('background','red');
            $(this).css('background','red');
            $(this).nextAll().css('background','transparent');

            switch(index){
                case 0:
                    $('span').html('很差');                  break;
                case 1:
                    $('span').html('较差');                  break;
                case 2:
                    $('span').html('还行');                  break;
                case 3:
                    $('span').html('推荐');                  break;
                case 4:
                    $('span').html('力荐');                  break;
            };

            $('.pox').eq(index).click(function(e) {
                $('span').html('您已评分!分数为'+(index+1)+'分');      
                Right=false;
            });

            $('#box').mouseleave(function(e) {
                if(Right){
                        $(this).find('div').css('background','transparent');
                        $('span').html('请评分');
                }
            });
        }

    });
}

</script>