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

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.5let 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变量中，即可完成点亮星星的功能。