实现星星打分功能1-10分

最新推荐文章于 2023-04-19 10:52:37 发布

置顶 ITBoyLoveLOL

最新推荐文章于 2023-04-19 10:52:37 发布

阅读量923

点赞数 1

文章标签：星星打分 js页面效果

本文链接：https://blog.csdn.net/ITboylol/article/details/103309929

版权

1.功能概要

+可以打分区间为1-10

+每个分值对应一个评价

+共有5颗星，可以半星打分

2.思路分析

+页面布局上考虑用背景图实现星星打分，通过控制背景图的定位实现具体打几颗星

+定义一个全局变量用于存储分值

+定义一个评价数组存储不同分值对应的评价

+定义样式修改函数，通过不同分值来控制背景图的定位位置和显示不同评价

+定义鼠标点击和鼠标移入方法来动态改变分值，并调用样式修改函数实现动态打分

+用到的背景图

3.具体代码

页面结构和样式

<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .pf-item {
            margin: 50px auto;
        }

        .pf-item span {
            display: inline-block;
            vertical-align: middle;
        }

        .star {
            background: url('./star_small.gif')no-repeat;
            background-position: 0px -180px;
            display: inline-block;
            vertical-align: middle;
        }

        .star li {
            float: left;
            width: 10px;
            height: 20px;

        }

        .star li:nth-child(2n) {
            margin-right: 4px;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix::after {
            clear: both;
            content: '';
            display: block;
            visibility: hidden;
            width: 0;
            height: 0;
        }
</style>
<div class="pf-item">
        <span>评分:</span>
        <ul class="star clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class="pj">垃圾</span>
</div>

js部分

$(function () {
        var fs = 1;
        var pj = ["垃圾", "太烂了", "太菜了", "不够好", "一般", "还可以", "还好", "很不错", "超赞", "极品"]
        //根据分值动态设置背景定位
        function setPosition() {
            $('.star').css("backgroundPosition", "0px " + (-180 + (fs - 1) * 20) + "px");
            $('.pj').text(pj[fs - 1]);
        }
        //动态改变分值
        $('.star li').on('click', function () {
            fs = $(this).index() + 1;
            setPosition()

        });
        $('.star li').on('mouseenter', function () {
            fs = $(this).index() + 1;
            setPosition();
        });
    })

4.截图效果