佛山网站优化有,wordpress首页显示vip标识,网站更换空间教程,云服务器开网站使用HTML、CSS和JavaScript实现星星评分系统
本文将详细讲解如何使用 HTML、CSS 和 JavaScript 实现一个简单的星星评分系统。用户可以通过点击星星进行评分#xff0c;并且还能够看到星星的悬浮效果和已选中状态。
1. HTML 结构
我们首先在 HTML 中定义了一个星星评分的结…使用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()我们遍历所有的星星并为每颗星星绑定三个事件监听器 mouseover当鼠标悬停在星星上时调用 updateStars 函数来更新星星的显示状态使其呈现悬浮效果。mouseout当鼠标移出星星时恢复为当前评分的显示状态。click当用户点击某颗星星时更新当前评分并更新星星显示状态。 updateStars(rating)这个函数用于根据当前评分或悬浮的评分更新星星的显示状态。它遍历所有星星并根据评分值添加或移除 CSS 类从而控制星星的颜色变化。 submitRating()这个函数是用于将评分提交到服务器的示例代码在实际应用中可以根据需要修改 URL 和处理方法。它通过 fetch 方法将评分信息发送到服务器端。
4. 页面加载时的初始化
当页面加载时我们假设评分是默认值 0并通过 window.onload 初始化星星的显示状态。可以根据实际情况从本地存储或服务器加载已保存的评分并显示对应的星星。
总结
通过以上的代码和讲解我们可以创建一个简单且互动的星星评分系统。用户可以通过鼠标悬停和点击进行评分同时星星的显示效果也会即时更新。这个评分系统不仅是前端开发的一个良好示例还可以在实际的应用中扩展用于文件上传、商品评价等场景。代码示例
!DOCTYPE html
htmlheadmeta charsetutf-8title星星评分/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/headbody!-- 星星评分容器 --div classstar-ratingul classstarsli data-value1 classstar★/lili data-value2 classstar★/lili data-value3 classstar★/lili data-value4 classstar★/lili data-value5 classstar★/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
