点亮星星评分效果（js/vue）

一只欢喜

已于 2023-06-09 10:09:16 修改

阅读量378

点赞数 1

文章标签： html css javascript

于 2023-06-06 23:09:26 首次发布

本文链接：https://blog.csdn.net/qq_44866810/article/details/131077955

版权

1.使用js计算宽度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .father {
        position: relative;
    }

    .white {
        display: flex;
        width: 70px;
    }

    .score {
        position: absolute;
        top: 0;
    }

    .flex_wrap {
        display: flex;
        width: 70px;
        overflow: hidden;
    }

    .score img {
        width: 14px;
    }
</style>

<body>
    <div class="father">
        <div class="white">
            <img src="./image/star1.png" alt="">
            <img src="./image/star1.png" alt="">
            <img src="./image/star1.png" alt="">
            <img src="./image/star1.png" alt="">
            <img src="./image/star1.png" alt="">
        </div>
        <div class="score">
            <div class="flex_wrap">
                <img src="./image/star2.png" alt="">
                <img src="./image/star2.png" alt="">
                <img src="./image/star2.png" alt="">
                <img src="./image/star2.png" alt="">
                <img src="./image/star2.png" alt="">
            </div>
               
        </div>
         
    </div>
    <script>
        let score = 3.5
        let scoreEle = document.querySelector('.flex_wrap')
        console.log(scoreEle.style);
        scoreEle.style.width = score * 70 / 5 + 'px'
    </script>
</body>

</html>

2.使用vue

1. 在页面中定义一个存储评分的变量，比如叫做score。

2. 在页面中引入需要用到的图片资源，比如评分未选中和已选中状态的星星图片。

3. 获取后台传入的评分数字，假设保存在score变量中。

4. 根据评分数字计算需要点亮的星星数，并将个数保存在一个新的变量中，比如叫做lightNum。

5. 在页面上使用wx:for循环遍历需要绘制的星星，并对每颗星星应用不同的样式（已点亮状态或者未点亮状态）。

具体实现代码如下：

<template>
  <view>
    <view class="stars">
      <view class="star" wx:for="i in stars" :key="i" :class="{'active': i<=lightNum}"></view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      score: 4.5, // 后台传入的评分数字
      stars: [1, 2, 3, 4, 5], // 星星的数量
      lightNum: 0 // 需要点亮的星星数
    }
  },
  methods: {
    // 计算需要点亮的星星数
    calcLightNum () {
      const intNum = parseInt(this.score) // 分数的整数部分
      const decimalNum = parseFloat((this.score - intNum).toFixed(1)) // 分数的小数部分
      let lightNum = intNum // 整数部分的星星全部点亮

      if (decimalNum > 0.5) { // 如果小数部分大于0.5，则多点亮一颗星
        lightNum++
      } else if (decimalNum > 0) { // 如果小数部分在0到0.5之间，则半颗星
        lightNum += 0.5
      }

      this.lightNum = lightNum
    }
  },
  mounted () {
    this.calcLightNum()
  }
}
</script>

<style>
  .star {
    display: inline-block;
    margin-right: 6px;
    width: 32px;
    height: 32px;
    background-image: url('/static/images/star.png');
    background-size: 32px 32px;
  }

  .active {
    background-image: url('/static/images/star-active.png');
    background-size: 32px 32px;
  }
</style>

解析：

1. 在页面数据中定义了score、stars和lightNum三个变量，分别代表评分数字、星星的数量和需要点亮的星星数。

2. 页面中定义了一个方法calcLightNum来计算需要点亮的星星数。

3. 在mounted钩子函数中调用calcLightNum方法。

4. 在页面中使用wx:for循环遍历stars数组，对每颗星星应用不同的样式（已点亮状态或者未点亮状态）。已点亮的星星数量由lightNum控制，如果i<=lightNum，则应用.active样式，表示该星星已被点亮。

5. 根据评分数字，计算出需要点亮的星星数后，保存在lightNum变量中，即可完成点亮星星的功能。