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

实现星星评分系统

news 2025/7/8 23:03:17

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/7/5 22:28:03

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…...

编程新知 2025/6/17 2:24:14

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/6/17 5:20:48

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/7/8 4:41:58

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/7/6 0:53:56

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/7/4 20:21:33

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/6/16 21:35:46

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38