当前位置： 首页 > news >正文

实现星星评分系统

news 2026/2/11 1:33:29

使用HTML、CSS和JavaScript实现星星评分系统

本文将详细讲解如何使用 HTML、CSS 和 JavaScript 实现一个简单的星星评分系统。用户可以通过点击星星进行评分，并且还能够看到星星的悬浮效果和已选中状态。

1. HTML 结构

我们首先在 HTML 中定义了一个星星评分的结构，使用 <ul> 列表来包含五个星星，每颗星星通过 <li> 元素表示。每个星星都通过 data-value 属性来指定它代表的评分值（1 到 5）。

2. CSS 样式

在 CSS 中，我们对星星的样式进行了设置：

  • star-rating：这个类设置了评分容器的字体大小和显示方式，字体大小设置为 30px，以确保星星显示的足够大。
  • stars：这个类去除了默认的列表样式，使星星排列成一行。
  • star：每颗星星的基本样式。我们将星星的颜色设置为灰色，并为其添加了过渡效果，让颜色变化更加平滑。cursor: pointer 使得星星可点击。
  • star.hover 和 star.selected：这些类用于处理鼠标悬浮和点击选中的效果。当鼠标悬停或点击时，星星的颜色会变为金色。

3. JavaScript 交互逻辑

JavaScript 的核心作用是处理用户与星星评分系统的交互，包括鼠标悬浮、点击评分和更新显示状态。

  • stars.forEach()：我们遍历所有的星星，并为每颗星星绑定三个事件监听器：

    1. mouseover：当鼠标悬停在星星上时，调用 updateStars 函数来更新星星的显示状态，使其呈现悬浮效果。
    2. mouseout：当鼠标移出星星时，恢复为当前评分的显示状态。
    3. click：当用户点击某颗星星时，更新当前评分，并更新星星显示状态。

  • updateStars(rating)：这个函数用于根据当前评分（或悬浮的评分）更新星星的显示状态。它遍历所有星星并根据评分值添加或移除 CSS 类，从而控制星星的颜色变化。

  • submitRating()：这个函数是用于将评分提交到服务器的示例代码（在实际应用中，可以根据需要修改 URL 和处理方法）。它通过 fetch 方法将评分信息发送到服务器端。

4. 页面加载时的初始化

当页面加载时，我们假设评分是默认值 0，并通过 window.onload 初始化星星的显示状态。可以根据实际情况，从本地存储或服务器加载已保存的评分，并显示对应的星星。

总结

通过以上的代码和讲解，我们可以创建一个简单且互动的星星评分系统。用户可以通过鼠标悬停和点击进行评分，同时星星的显示效果也会即时更新。这个评分系统不仅是前端开发的一个良好示例，还可以在实际的应用中扩展，用于文件上传、商品评价等场景。

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>星星评分</title><!-- 引入CSS样式 --><style>.star-rating {font-size: 30px;display: inline-block;}.stars {list-style: none;padding: 0;margin: 0;display: flex;}.star {color: #ccc;/* 默认是空心星星的颜色 */cursor: pointer;transition: color 0.2s ease;/* 加入过渡效果，使得星星的颜色变化更加平滑 */}.star.hover,.star.selected {color: gold;/* 选中的星星为金色 */}</style></head><body><!-- 星星评分容器 --><div class="star-rating"><ul class="stars"><li data-value="1" class="star">★</li><li data-value="2" class="star">★</li><li data-value="3" class="star">★</li><li data-value="4" class="star">★</li><li data-value="5" class="star">★</li></ul></div><!-- 引入JavaScript脚本 --><script>// 获取所有星星元素let stars = document.querySelectorAll('.star');let currentRating = 0; // 当前评分，初始为0// 添加鼠标悬浮效果stars.forEach(star => {// 鼠标悬浮时更新星星状态star.addEventListener('mouseover', () => {let value = parseInt(star.getAttribute('data-value')); // 获取当前星星的值updateStars(value); // 更新所有星星的显示});// 鼠标移开时恢复当前的评分状态star.addEventListener('mouseout', () => {updateStars(currentRating);});// 点击星星时更新当前评分star.addEventListener('click', () => {currentRating = parseInt(star.getAttribute('data-value')); // 更新评分值updateStars(currentRating); // 更新星星显示状态});});// 更新星星状态的函数function updateStars(rating) {stars.forEach(star => {let value = parseInt(star.getAttribute('data-value'));if (value <= rating) {// 如果星星的值小于等于评分值，设置为已选中状态star.classList.add('selected');star.classList.remove('hover');} else {// 否则，移除已选中状态star.classList.remove('selected');// 如果星星值小于等于当前悬浮位置的值，添加悬浮效果if (value <= rating) {star.classList.add('hover');} else {star.classList.remove('hover');}}});}// 提交评分到后端（示例代码）function submitRating() {fetch('/submit-rating', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({rating: currentRating // 提交当前评分}),}).then(response => response.json()).then(data => console.log('评分已提交:', data)).catch(error => console.error('提交失败:', error));}// 页面加载时，初始化评分window.onload = function() {let savedRating = 0; // 假设页面加载时默认评分为0currentRating = savedRating;updateStars(savedRating); // 初始化星星状态};</script></body>
</html>

相关文章：

实现星星评分系统

使用HTML、CSS和JavaScript实现星星评分系统 本文将详细讲解如何使用 HTML、CSS 和 JavaScript 实现一个简单的星星评分系统。用户可以通过点击星星进行评分&#xff0c;并且还能够看到星星的悬浮效果和已选中状态。 1. HTML 结构 我们首先在 HTML 中定义了一个星星评分的结…...

编程日记 2024/12/20 16:37:17

数据库建模工具 PDManer

数据库建模工具 PDManer 1.PDManer简介2.PDManer使用 1.PDManer简介 PDManer&#xff08;元数建模&#xff09;是一款功能强大且易于使用的开源数据库建模工具。它不仅支持多种常见数据库&#xff0c;如MySQL、PostgreSQL、Oracle、SQL Server等&#xff0c;还特别支持国产数据…...

编程日记 2024/12/20 16:35:11

后台运维操作建议

文章目录 1.版本升级2.配置发布3.数据库/脚本操作4.发布依赖确认5.发布规范6.服务下线参考文献 1.版本升级 版本升级是软件维护和演进中的关键环节&#xff0c;但它可能带来一系列问题。这些问题涉及兼容性、功能、性能、安全性等方面。 【强制】版本管理&#xff1a;使用版本…...

编程日记 2024/12/20 16:34:10

NX二次开发调用内部函数设置对象穿透显示DSS_ATTR_set_show_through

获取动态库libdisp.dll的路径 void TcharToChar(const TCHAR* tchar, char* _char) {int iLength; #if UNICODE//获取字节长度 iLength = WideCharToMultiByte(CP_ACP, 0, tchar, -1, NULL, 0, NULL, NULL);//将tchar值赋给_char WideCharToMultiByte(CP_ACP, 0, tchar, …...

编程日记 2024/12/20 16:31:06

ubuntu16.04ros-用海龟机器人仿真循线系统

下载安装sudo apt-get install ros-kinetic-turtlebot ros-kinetic-turtlebot-apps ros-kinetic-turtlebot-interactions ros-kinetic-turtlebot-simulator ros-kinetic-kobuki-ftdi sudo apt-get install ros-kinetic-rocon-*echo "source /opt/ros/kinetic/setup.bash…...

编程日记 2024/12/20 16:28:02

解决Ubuntu 20.04上编译OpenCV 3.2时遇到的stdlib.h缺失错误

解决Ubuntu 20.04上编译OpenCV 3.2时遇到的stdlib.h缺失错误 您在 Ubuntu 20.04 上编译 OpenCV 3.2 时遇到的错误与 C 标准库的头文件配置问题有关。错误消息指出系统无法找到 <stdlib.h>&#xff0c;这通常与预编译头文件的处理、GCC 版本或者头文件搜索路径有关。下面…...

编程日记 2024/12/20 16:22:56

HTML综合案例

为了前端考试。 效果图&#xff1a; HTML代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2024/12/20 16:18:51

TanStack——为现代前端开发提供高性能和灵活的工具

TanStack 是一个由社区主导的开源项目集合&#xff0c;专注于为现代前端开发提供高性能和灵活的工具。它包括多个流行的 JavaScript 和 TypeScript 库&#xff0c;主要用于处理表格、查询、虚拟化、状态管理等功能。 文章目录 1、TanStack Query&#xff1a;1.1 useQuery&#…...

编程日记 2024/12/20 16:17:46

Java爬虫️ 使用Jsoup库进行API请求有什么优势？

在Java的世界里&#xff0c;Jsoup库以其强大的HTML解析能力而闻名。它不仅仅是一个简单的解析器&#xff0c;更是一个功能齐全的工具箱&#xff0c;为开发者提供了从网页抓取到数据处理的一站式解决方案。本文将深入探讨使用Jsoup库进行API请求的优势&#xff0c;并提供代码示例…...

编程日记 2024/12/20 16:16:45

React源码02 - 基础知识 React API 一览

1. JSX到JavaScript的转换 <div id"div" key"key"><span>1</span><span>2</span> </div>React.createElement("div", // 大写开头会当做原生dom标签的字符串&#xff0c;而组件使用大写开头时&#xff0c;这…...

编程日记 2024/12/20 16:12:40

COMSOL with Matlab

文章目录 基本介绍COMSOL with MatlabCOMSOL主Matlab辅Matlab为主Comsol为辅 操作步骤常用指令mphopenmphgeommghmeshmphmeshstatsmphnavigatormphplot常用指令mphsavemphlaunchModelUtil.clear 实例教学自动另存新档**把语法套用到边界条件**把语法套用到另存新档 函数及其微分…...

编程日记 2024/12/20 16:10:36

【报表查询】.NET开源ORM框架 SqlSugar 系列

文章目录 前言实践一、按月统计没有为0实践二、 统计某月每天的数量实践三、对象和表随意JOIN实践四、 List<int>和表随意JOIN实践五、大数据处理实践六、每10分钟统计Count实践七、 每个ID都要对应时间总结 前言 在我们实际开发场景中&#xff0c;报表是最常见的功能&a…...

编程日记 2024/12/20 16:09:35

PostgreSQL数据库访问限制详解

pg_hba.conf 文件是 PostgreSQL 数据库系统中非常重要的一个配置文件&#xff0c;它用于定义哪些用户&#xff08;或客户端&#xff09;可以连接到 PostgreSQL 数据库服务器&#xff0c;以及他们可以使用哪些认证方法进行连接。 pg_hba.conf 的名称来源于 "Host-Based Aut…...

编程日记 2024/12/20 16:01:22

【test linux】创建一个ext4类型的文件系统

创建一个ext4类型的文件系统 dd 是一个非常强大的命令行工具&#xff0c;用于在Unix/Linux系统中进行低级别的数据复制和转换。这条命令的具体参数含义如下&#xff1a; if/dev/zero&#xff1a;指定输入文件&#xff08;input file&#xff09;为 /dev/zero&#xff0c;这是一…...

编程日记 2024/12/20 15:59:20

如何在繁忙的生活中找到自己的节奏？

目录 一、理解生活节奏的重要性 二、分析当前生活节奏 1. 时间分配 2. 心理状态 3. 身体状况 4. 生活习惯 1. 快慢适中 2. 张弛结合 3. 与目标相符 三、掌握调整生活节奏的策略 1. 设定优先级 2. 合理规划时间 3. 学会拒绝与取舍 4. 保持健康的生活方式 5. 留出…...

编程日记 2024/12/20 15:48:07

AI-PR曲线

PR曲线 人工智能里面的一个小概念。 2.3 性能度量&#xff08;查全率&#xff0c;查准率&#xff0c;F1&#xff0c;PR曲线与ROC曲线&#xff09; 预测出来的是一个概率&#xff0c;不能根据概率来说它是正类还是负类&#xff0c;要有一个阈值。 查准率&#xff08;Precision&…...

编程日记 2024/12/20 15:46:05

Guava 提供了集合操作 `List`、`Set` 和 `Map` 三个工具类

入门示例 guava 最佳实践 学习指南 以下是使用Google Guava库中的工具方法来创建和操作List、Set、Map集合的一些示例&#xff1a; List相关操作 创建List 使用Lists.newArrayList()创建一个新的可变ArrayList实例。List<Integer> list Lists.newArrayList(1, 2, 3);/…...

编程日记 2024/12/20 15:45:04

深入解析 Elasticsearch 集群配置文件参数

在自建 Elasticsearch 集群时&#xff0c;我们需要通过 elasticsearch.yml 文件对节点角色、网络设置、集群发现和数据存储路径等进行灵活配置。配置项的合理设置对集群的稳定性、性能与扩展性影响深远。本文将以一个示例配置文件为蓝本&#xff0c;逐条解析各参数的含义与建议…...

编程日记 2024/12/20 15:43:01

WebMvcConfigurer和WebMvcConfigurationSupport（MVC配置）

一:基本介绍 WebMvcConfigurer是接口&#xff0c;用于配置全局的SpringMVC的相关属性&#xff0c;采用JAVABean的方式来代替传统的XML配置文件&#xff0c;提供了跨域设置、静态资源处理器、类型转化器、自定义拦截器、页面跳转等能力。 WebMvcConfigurationSupport是webmvc的…...

编程日记 2024/12/20 15:36:54

用 javascript 来回答宇宙外面是什么

宇宙外面是什么呢? 估计这个问题要困扰很多人, 让我们用一段 javascript 代码来回答一下. 一, 从一段代码说起 var 地球 {名字 : "地球",女友 : "月亮",外面 : {名字 : "太阳系",老大 : "太阳",老二 : {名字 : "木星",二…...

编程日记 2024/12/20 15:34:49

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2026/2/5 21:34:41

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59