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

实现星星评分系统

news 2026/4/1 19:48:46

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

大三下期末突击指南：从编译原理到大数据，这6门课我是怎么一周内搞定的

大三下期末突击指南&#xff1a;从编译原理到大数据&#xff0c;这6门课我是怎么一周内搞定的 距离期末考试只剩一周&#xff0c;面对算法分析、编译原理、嵌入式这些硬核课程&#xff0c;你是不是已经开始焦虑了&#xff1f;别担心&#xff0c;去年我也经历过同样的困境。通过…...

编程新知 2026/4/1 19:09:01

Miri最佳实践清单：构建安全Rust代码的20条黄金法则

Miri最佳实践清单&#xff1a;构建安全Rust代码的20条黄金法则 【免费下载链接】miri An interpreter for Rusts mid-level intermediate representation 项目地址: https://gitcode.com/GitHub_Trending/mi/miri Miri是Rust的中级中间表示解释器&#xff0c;它能帮助开…...

编程新知 2026/4/1 19:04:59

思源宋体实战指南：7种字重构建与多语言字体优化技巧

思源宋体实战指南&#xff1a;7种字重构建与多语言字体优化技巧 【免费下载链接】source-han-serif Source Han Serif | 思源宋体 | 思源宋體 | 思源宋體 香港 | 源ノ明朝 | 본명조 项目地址: https://gitcode.com/gh_mirrors/sou/source-han-serif 思源宋体作为Adobe推…...

编程新知 2026/4/1 18:42:38

FSearch：Linux系统上如何用这款革命性工具实现毫秒级文件搜索

FSearch&#xff1a;Linux系统上如何用这款革命性工具实现毫秒级文件搜索 【免费下载链接】fsearch A fast file search utility for Unix-like systems based on GTK3 项目地址: https://gitcode.com/gh_mirrors/fs/fsearch 你是否曾在Linux系统中为寻找一个文件而花费…...

编程新知 2026/4/1 16:10:36

信号处理中的数字滤波器设计策略指南：从理论到实际应用

信号处理中的数字滤波器设计策略指南&#xff1a;从理论到实际应用 【免费下载链接】gnuradio GNU Radio – the Free and Open Software Radio Ecosystem 项目地址: https://gitcode.com/gh_mirrors/gn/gnuradio 在现代通信系统和信号处理应用中&#xff0c;数字滤波器…...

编程新知 2026/4/1 15:13:40

Pixel Fashion Atelier部署案例：中小企业低成本GPU算力优化生成方案

Pixel Fashion Atelier部署案例&#xff1a;中小企业低成本GPU算力优化生成方案 1. 项目概述与核心价值 Pixel Fashion Atelier是一款专为时尚设计领域打造的AI图像生成工作站&#xff0c;基于Stable Diffusion和Anything-v5模型构建。与传统AI工具不同&#xff0c;它采用独特…...

编程新知 2026/4/1 14:59:27

韩国AI芯片企4亿融资，挑战英伟达？

3月31日消息&#xff0c;韩国AI芯片初创企业Rebellions完成4亿美元融资&#xff0c;总融资达8.5亿美元&#xff0c;估值约23.4亿美元&#xff0c;正筹备上市。还发布两款产品&#xff0c;欲挑战英伟达。巨额融资与上市筹备近日&#xff0c;Rebellions宣布完成4亿美元融资&#…...

编程新知 2026/4/1 14:26:18

星露谷物语SMAPI模组加载器：终极安装与使用完全指南

星露谷物语SMAPI模组加载器&#xff1a;终极安装与使用完全指南 【免费下载链接】SMAPI The modding API for Stardew Valley. 项目地址: https://gitcode.com/gh_mirrors/smap/SMAPI 想要为《星露谷物语》安装模组来扩展游戏体验吗&#xff1f;SMAPI模组加载器是官方推…...

编程新知 2026/4/1 14:22:08

3步打造Windows桌面美学：TranslucentTB让任务栏焕发新生

3步打造Windows桌面美学&#xff1a;TranslucentTB让任务栏焕发新生 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 一、为什么你的任务栏…...

编程新知 2026/4/1 14:03:45

3个核心模块揭秘：Python量化投资如何免费获取通达信专业数据

3个核心模块揭秘&#xff1a;Python量化投资如何免费获取通达信专业数据 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 你是否在量化投资中为数据获取而烦恼&#xff1f;商业接口太贵&#xff0c…...

编程新知 2026/4/1 9:48:22