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

实现星星评分系统

news 2026/5/16 22:49:06

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

Unity SLG大地图实战：用TileManager和AOI搞定网格管理与视野同步（附Demo代码）

Unity SLG大地图开发实战&#xff1a;网格管理与AOI视野同步的工程化解决方案 在SLG游戏开发中&#xff0c;大地图系统是核心体验的基石。面对动辄数万网格的动态管理需求&#xff0c;以及需要与后端高效协作的视野同步问题&#xff0c;传统开发方式往往陷入性能瓶颈和逻辑混乱…...

编程新知 2026/5/16 21:30:48

告别风扇噪音与高温：FanControl让你的Windows电脑安静又冷静

告别风扇噪音与高温&#xff1a;FanControl让你的Windows电脑安静又冷静 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trend…...

编程新知 2026/5/16 21:13:45

Win11Debloat终极指南：如何轻松优化Windows 11系统性能

Win11Debloat终极指南&#xff1a;如何轻松优化Windows 11系统性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and c…...

编程新知 2026/5/16 20:53:53

通过curl命令直接测试Taotoken聊天补全接口的配置与调用

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过curl命令直接测试Taotoken聊天补全接口的配置与调用 在对接大模型服务时&#xff0c;有时我们希望在引入完整SDK之前&#xff…...

编程新知 2026/5/16 20:25:47

钱学森物理大一统：宇宙速度阶梯尺 全套公版正式文档（带可计算代码）

宇宙速度阶梯尺 全套公版正式文档 &#xff08;无版权全开源全民通用可直接印刷发布/平台投稿/社区分发&#xff09; 开篇总纲 定名&#xff1a;本源速度阶梯尺 核心主旨&#xff1a;大道至简&#xff0c;以地球天然标准音速为万物速度本源基底&#xff0c;以宇宙真空光速为速度…...

编程新知 2026/5/16 19:41:50

Node.js 服务端项目接入 Taotoken 多模型 API 的完整步骤

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Node.js 服务端项目接入 Taotoken 多模型 API 的完整步骤 对于使用 Node.js 构建后端服务的开发者而言&#xff0c;统一接入多个大…...

编程新知 2026/5/16 19:10:20

DayZ社区离线模式：5步搭建专属单人末日世界

DayZ社区离线模式&#xff1a;5步搭建专属单人末日世界 【免费下载链接】DayZCommunityOfflineMode A community made offline mod for DayZ Standalone 项目地址: https://gitcode.com/gh_mirrors/da/DayZCommunityOfflineMode DayZ社区离线模式为玩家提供了一个完整的…...

编程新知 2026/5/16 16:27:26

如何构建工业级智能预测性维护系统：基于LSTM的5大实战策略

如何构建工业级智能预测性维护系统&#xff1a;基于LSTM的5大实战策略 【免费下载链接】Predictive-Maintenance-using-LSTM Example of Multiple Multivariate Time Series Prediction with LSTM Recurrent Neural Networks in Python with Keras. 项目地址: https://gitcod…...

编程新知 2026/5/16 15:26:40

Linux微信小程序开发终极指南：从零搭建完整开发环境

Linux微信小程序开发终极指南&#xff1a;从零搭建完整开发环境 【免费下载链接】wechat-web-devtools-linux 适用于微信小程序的微信开发者工具 Linux移植版 项目地址: https://gitcode.com/gh_mirrors/we/wechat-web-devtools-linux 还在为Linux系统无法进行微信小程序…...

编程新知 2026/5/16 14:51:54

Spring Boot安全脚手架：openclaw-security-starter核心架构与实战指南

1. 项目概述&#xff1a;一个面向开发者的安全脚手架最近在梳理团队内部的安全开发规范时&#xff0c;发现一个普遍痛点&#xff1a;每个新项目启动&#xff0c;安全相关的配置总是东拼西凑&#xff0c;从依赖扫描、密钥管理到API安全策略&#xff0c;都得重新来一遍&#xff0…...

编程新知 2026/5/16 14:02:29