五星级评价-优快云博客

本文介绍了一个基于HTML、CSS和JavaScript的星级评分组件的实现过程。通过动态改变星星图标的状态，实现用户对服务态度等项目的评分功能。代码示例中详细展示了如何使用Vue.js的数据绑定和事件监听来更新星星图标，并记录评分结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

二、Html

　　<div class="commentTitle clearfix">
      <div class="comment floatL">服务态度</div>
      <div class="starBox" ref="star1">
        <div class="star" v-for="(item,index) in starArr1" :key="index" @click="starClick1(index)">
          <img :src="'../../static/images/'+item.imgSrc">
        </div>
      </div>
    </div>

三、JS

starArr1: [{imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}, {imgSrc: 'star1.png'}] //  变量

　　starClick1 (index) {
      this.starArr1.forEach((element, i) => {
        this.$set(element, 'imgSrc', 'star1.png')
        if (i <= index) {
          this.$set(element, 'imgSrc', 'star2.png')
        }
      })
      this.commentScore = index + 1 //  评价成绩
    }

star1.png：

star2.png：

四、css

.commentTitle {
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: .32rem;
  color: #333333;
  padding-top: .4rem;
}
.comment {
  line-height: .7rem;
  padding-right: 10px;
}
.starBox {
  display: flex;
  display: -webkit-flex;
  line-height: .9rem;
}
.star img {
  width: .8rem;
  height: .4rem;
}