star评星点亮星星原生js评星 vue评星

最新推荐文章于 2022-11-08 15:16:59 发布

xiaoxiao无脸男

最新推荐文章于 2022-11-08 15:16:59 发布

阅读量763

点赞数 1

分类专栏： js vue 文章标签： vue评星 vue hover改变样式点亮星星原生评价

本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/85492813

版权

vue 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

类似于淘宝订单交易成功后，会进行评价。

项目结构如下：

一：原生js进行评星

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>评星</title>

<style>

.star {

width: 30px;

}

</style>

</head>



<body>

<div>

<p>请评价：</p>

<div class="star-warp">

<img src="./img/star.png" class="star" />

<img src="./img/star.png" class="star" />

<img src="./img/star.png" class="star" />

<img src="./img/star.png" class="star" />

<img src="./img/star.png" class="star" />

</div>

</div>

<script>

var star =document.getElementsByClassName("star");//获取所有的img

var sureIndex = 1;//已经确定的星星的索引 第一次评星的时候 此值是-1 0表示选择了1个星星

lightStar(sureIndex);//初始化数据

for(var i = 0;i<star.length;i++){

(function(i){

//mouseover

star[i].onmouseover =function(){

lightStar(i);

};

//mouseout

star[i].onmouseout =function(){

lightStar(sureIndex);

};

//点击

star[i].onclick =function(){

sureIndex = i;

lightStar(i);

};

}(i))

}



//点亮星星

function lightStar(count){

for(var i = 0;i<=count;i++){

star[i].src='./img/star1.png';

}

for(var i = (count+1);i<5;i++){

star[i].src='./img/star.png';

}

}

</script>

</body>

</html>

原生js主要是根据index来进行相应的样式变化，重点是弄清楚索引，，如图，黄色星星的索引分别是0，1，灰色索引是以（0+黄色星星个数开始的），即灰色星星索引以2开始。

2.vue写法，依赖vue.js

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>评星</title>

<style>

.star {

width: 30px;

}

</style>

</head>



<body>

<div id="content">

<p>请评价：</p>

<div class="star-warp">

<img src="./img/star1.png" class="star" v-for="(item,index) in (hoveIndex+1)" @mouseover="overStar(index)"

@mouseout="outStar(index)" @click="clickStar(index)" />

<img src="./img/star.png" class="star" v-for="(item,index) in (4-hoveIndex)" @mouseover="overStar(index+hoveIndex+1)"

@mouseout="outStar(index+hoveIndex+1)" @click="clickStar(index+hoveIndex+1)" />

</div>

</div>

<script src="./js/vue.js"></script>

<script>

var vm = new Vue({

el: '#content',

data: {

sureIndex: 1, //已经确定的星星的索引 第一次评星的时候 此值是-1 0表示有1个星星确定

hoveIndex: 1 //hover星星的索引 第一次评星的时候 此值是-1与surIndex一致

},

methods: {

//mouseover

overStar: function (index) {

if (index >= 4) { //避免鼠标滑快

index = 4;

}

this.hoveIndex = index;

},

//mouseout

outStar: function (index) {

if (index >= 4) { //避免鼠标滑快

index = 4;

}

this.hoveIndex = this.sureIndex;

},

//点击星星

clickStar: function (index) {

this.hoveIndex = this.sureIndex = index;

}

}

})

</script>

</body>



</html>

使用Vue的时候，同原生js一样，重点是索引的值，另外，此次添加了个变量hoverIndex,来区别mouseover和mouseout显示的星星。