前端星级打分代码
时间: 2023-07-23 16:16:36 浏览: 56
前端星级打分代码可以使用HTML、CSS和JavaScript实现。以下是一个简单的例子:
HTML代码:
```
<div class="star-rating">
<span class="star" data-rating="1"></span>
<span class="star" data-rating="2"></span>
<span class="star" data-rating="3"></span>
<span class="star" data-rating="4"></span>
<span class="star" data-rating="5"></span>
</div>
```
CSS代码:
```
.star-rating {
display: inline-block;
}
.star {
font-size: 30px;
color: gray;
cursor: pointer;
}
.star:hover,
.star:hover ~ .star {
color: orange;
}
```
JavaScript代码:
```
const stars = document.querySelectorAll(".star");
function rateStar() {
const rating = this.dataset.rating;
console.log(rating); // 可修改为保存到数据库或后台处理
}
stars.forEach(star => star.addEventListener("click", rateStar));
```
以上代码实现了一个包含五颗星的评分系统,当用户点击星星时,会在控制台打印出对应的星级评分。你可以根据需要修改CSS样式和JavaScript代码来适应你的项目需求。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)