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

实现星星评分系统

news 文章来源：https://blog.csdn.net/BANaanaa/article/details/144559432 2025/5/4 4:41:43

使用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

我的性能优化经验

专业方向&#xff1a;App cpu/memory/gpu/流畅度/响应时间的优化&#xff0c;Anr&#xff0c;Framework CarPowerManagementService模块的&#xff08;STR&#xff09;&#xff0c;从0~1完成性能监控体系搭建&#xff0c;完成3大版本迭代高质量性能交付 响应时间&#xff1a; …...

编程日记 2024/12/20 15:29:40

XSLT 编辑 XML

XSLT 编辑 XML 介绍 XSLT&#xff08;可扩展样式表语言转换&#xff09;是一种用于转换XML文档的语言。它允许开发人员将XML数据转换为其他格式&#xff0c;如HTML、PDF或纯文本。XSLT通过使用XPath查询来定位XML文档中的元素&#xff0c;并对这些元素应用转换规则。在本教程…...

编程日记 2024/12/20 15:27:37

数智读书笔记系列010 生命3.0：人工智能时代 人类的进化与重生

书名&#xff1a;生命3.0 生命3.0&#xff1a;人工智能时代,人类的进化与重生 著者&#xff1a;&#xff3b;美&#xff3d;迈克斯•泰格马克 迈克斯・泰格马克 教育背景与职业 教育背景&#xff1a;迈克斯・泰格马克毕业于麻省理工学院&#xff0c;获物理学博士学位。职业经…...

编程日记 2024/12/20 15:24:33

Transfomer的各层矩阵

一、输入 输入一句话&#xff1a;Hello CYZLAB the inspired world 每个单词为一个token 二、Embedding 这里的词向量维度为6&#xff0c;矩阵的行数为token数&#xff0c;列数是词向量的维度 这列是注释不算hello122694CYZLAB222372the222596inspired132440world431273 …...

编程日记 2024/12/20 15:23:33

代码随想录第51天

99.岛屿数量 深搜 import java.util.*;class Main{static int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};static boolean[][] visited;public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int…...

编程日记 2024/12/20 15:22:31

基础库httpx的使用

urllib 库和 requests 库的使用&#xff0c;已经可以爬取绝大多数网站的数据&#xff0c;但对于某些网站依然无能为力。什么情况?这些网站强制使用HTTP/2.0协议访问&#xff0c;这时 urllib 和requests 是无法爬取数据的&#xff0c;因为它们只支持 HTTP/1.1&#xff0c;不支持…...

编程日记 2024/12/20 15:19:28

c++中如何保持结构体的线程安全？3D坐标的线程安全：从理论到最优解

使用mutex的困扰 struct Point3d {std::mutex mtx;double x, y, z;void set(double nx, double ny, double nz) {std::lock_guard<std::mutex> lock(mtx);x nx; y ny; z nz;} };这种方案虽然安全&#xff0c;但性能开销确实不小。每次访问都需要加锁解锁&#xff0c;…...

编程日记 2024/12/20 15:18:27

Zabbix6.0升级为6.4

为了体验一些新的功能&#xff0c;比如 Webhook 和问题抑制等&#xff0c;升级个小版本。 一、环境信息 1. 版本要求 一定要事先查看官方文档&#xff0c;确认组件要求的版本&#xff0c;否则版本过高或者过低都会出现问题。 2. 升级前后信息 环境升级前升级后操作系统CentOS…...

编程日记 2024/12/20 15:13:18

答题考试系统v1.6.1高级版源码分享+uniapp+搭建测试环境

一.系统介绍 一款基于FastAdminThinkPHPUniapp开发的小程序答题考试系统&#xff0c;支持多种试题类型、多种试题难度、练题、考试、补考模式&#xff0c;提供全部前后台无加密源代码&#xff0c;支持私有化部署 二.测试环境 系统环境&#xff1a;CentOS、 运行环境&#x…...

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

【Lua热更新】下篇 -- 更新中

上篇链接&#xff1a;【Lua热更新】上篇 文章目录 三、xLua热更新&#x1f4d6;1.概述&#x1f4da;︎2.导入xLua框架&#x1f516;3. C#调用Lua3.1Lua解析器3.2Lua文件夹的重定向3.3Lua解析器管理器3.4全局变量获取3.5全局函数获取3.6映射到List和Dictionary3.7映射到类3.8映…...

编程日记 2024/12/20 15:10:13