java实现星级评分功能
时间: 2023-08-08 11:12:27 浏览: 47
可以通过使用HTML、CSS和JavaScript来实现星级评分功能,下面是一个简单的实现示例:
1. HTML代码
```html
<div class="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>
```
2. CSS样式
```css
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
}
.star {
display: inline-block;
color: #ccc;
font-size: 30px;
cursor: pointer;
}
.star:hover,
.star:hover ~ .star {
color: #ffcc00;
}
```
3. JavaScript代码
```javascript
var stars = document.querySelectorAll('.star');
for (var i = 0; i < stars.length; i++) {
stars[i].addEventListener('click', function() {
var rating = this.getAttribute('data-rating');
alert('You rated this ' + rating + ' stars!');
});
}
```
以上代码实现了一个包含五个星级评分的div,当用户点击其中一个星级时,会弹出一个提示框显示用户所选的星级评分。你可以根据自己的需求进行修改和扩展。