这篇博客介绍了一种使用JavaScript和HTML实现爱心点亮效果的方法。通过点击，可以让爱心逐个变红，以此来创建星级评论的视觉效果。文章提供了一个简单的CSS样式设置，以及JavaScript函数来改变爱心颜色。
<style>
.wrapper{
width: 300px;
display: flex;
justify-content: space-between;
}
.wrapper>div{
font-size: 80px;
}
</style>
<body>
<div class="wrapper">
<div class="heart" onclick = "test(0)">♥</div>
<div class="heart" onclick = "test(1)">♥</div>
<div class="heart" onclick = "test(2)">♥</div>
<div class="heart" onclick = 'test(3)'>♥</div>
<div class="heart" onclick = 'test(4)'>♥</div>
</div>
<script>
let _heart = document.querySelectorAll('.heart');
function test(num){
for (let i = 0; i < _heart.length; i++) {
if(i<=num){
_heart[i].style.color = 'red';
}else{
_heart[i].style.color = 'black';
}
}
}
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
