JS实现星星评分实例：图片与JavaScript配合

本文档详细介绍了如何使用JavaScript实现星星评分功能的实例代码，共有两种方法。首先，我们通过HTML和CSS来构建基础结构和样式。HTML部分包含一个无序列表，每个列表项代表一颗星星，通过CSS定义了星星的外观，包括默认的空心星和被选中的实心星。CSS中，当li元素拥有"light"类时，背景图的位置改变，星星会变亮表示被选中。 HTML结构中，使用了五个li元素，分别对应1到5星的评级。JavaScript部分则负责处理用户点击事件，实现动态显示评分。作者定义了三个变量：`var num`存储用户输入的评分，`var finalnum`用于记录最终点亮的星星数量，`var tempnum`作为临时存储值。`fnShow`函数是关键，它接收一个参数`num`，如果没有传递参数，则使用`tempnum`。函数通过遍历li列表，根据`finalnum`的值动态为相应数量的星星添加或移除"light"类，从而达到点亮星星的效果。 在交互方面，用户可以通过点击列表项的链接来选择不同的评分等级。当用户点击1星，`finalnum`将递增，相应地为第一个li元素添加"light"类；点击更多星，则`finalnum`递增并依次更新星星状态。这样就实现了用户对星星评分的实时反馈，增强了用户体验。 这个实例代码不仅展示了JavaScript操作DOM（文档对象模型）的能力，也展示了如何结合HTML和CSS进行简单的前端交互设计。对于学习和理解JavaScript动态网页开发的开发者来说，这是一个实用且易于理解的例子。通过这个实例，读者可以掌握如何利用JavaScript实现基础的星级评分功能，并将其应用到自己的项目中。