使用JavaScript实现五星评价功能的实践教程

JS 实现五星评价功能 在本文中，我们将探讨如何使用 JavaScript 实现五星评价功能。五星评价是一种常见的评估方式，广泛应用于电商、酒店、电影等领域。下面我们将逐步讲解如何使用 JS 实现五星评价功能。 知识点一：HTML 结构 首先，我们需要创建一个 HTML 结构来容纳五星评价功能。下面是基本的 HTML 代码： ```html <ul class="star-evaluation"> <li><a href="#" class="iconfont">&#xe600;</a></li> <li><a href="#" class="iconfont">&#xe600;</a></li> <li><a href="#" class="iconfont">&#xe600;</a></li> <li><a href="#" class="iconfont">&#xe600;</a></li> <li><a href="#" class="iconfont">&#xe600;</a></li> </ul> ``` 在上面的代码中，我们使用了无序列表 (`ul`) 来容纳五个列表项 (`li`), 每个列表项中包含一个链接 (`a`)，用于显示星星图标。 知识点二：CSS 样式 接下来，我们需要添加 CSS 样式来美化五星评价的外观。下面是基本的 CSS 代码： ```css .iconfont { font-family: 'iconfont' !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .star-evaluation { width: 827px; border: 2px solid #E84E40; background: #fff; z-index: 200; margin: 0 auto; padding: 20px; text-align: center; } .star-evaluation li { display: inline-block; margin-right: 10px; } .star-evaluation a { color: #666; text-decoration: none; } .star-evaluation a:hover { color: #E84E40; } ``` 在上面的代码中，我们使用了 `iconfont` 字体来显示星星图标，并添加了基本的样式来美化五星评价的外观。 知识点三：JavaScript 实现五星评价功能 最后，我们需要使用 JavaScript 来实现五星评价的交互功能。下面是基本的 JavaScript 代码： ```javascript const starEvaluation = document.querySelector('.star-evaluation'); const stars = starEvaluation.querySelectorAll('li'); stars.forEach((star, index) => { star.addEventListener('click', () => { // 评分逻辑 console.log(`您评了 ${index + 1} 分`); }); }); ``` 在上面的代码中，我们首先获取了五星评价容器 (`star-evaluation`) 和五个星星图标 (`li`)，然后我们使用 `forEach` 方法来遍历每个星星图标，并添加点击事件监听器。当用户点击某个星星图标时，我们可以执行评分逻辑，例如记录用户的评分。 知识点四：美化五星评价的外观 为了美化五星评价的外观，我们可以添加更多的 CSS 样式，例如 hover 效果、 active 状态等。下面是一个示例代码： ```css .star-evaluation a:hover { color: #E84E40; text-shadow: 0 0 10px #E84E40; } .star-evaluation a.active { color: #E84E40; background: #fff; border-radius: 50%; padding: 5px; } ``` 在上面的代码中，我们添加了 hover 效果和 active 状态，以美化五星评价的外观。 我们可以使用 HTML、CSS 和 JavaScript 实现五星评价功能，提供给用户一个交互式的评估体验。