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

本文主要是介绍实现星星打分功能1-10分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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.截图效果