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

最新推荐文章于 2022-11-08 15:16:59 发布
最新推荐文章于 2022-11-08 15:16:59 发布
阅读量757 收藏 2
点赞数 1
分类专栏： js vue 文章标签： vue评星 vue hover改变样式 点亮星星 原生评价
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/85492813
版权
vue 同时被 2 个专栏收录
30 篇文章 1 订阅
订阅专栏
js
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显示的星星。

xiaoxiao无脸男
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue的星级评分功能
02-23
基于Vue的星级打分功能，代码一共才70行，非常的简单易用，解压即可运行看效果 ，代码注释十分详细，思路都在！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
vue实现点击星星评分效果
zyynb的博客
06-10 1462
vue实现点击星星评分效果 首先通过引入bootcdn里的font-awesome获取星星素材 <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> 此时’fa-star’为实星，‘fa-star-o’为空星。 给它一个变量定义星星的个数count <style> .fa { colo
vue点赞飘心（实测可用）
大大大大冬瓜
01-24 2165
点赞飘心的组件，拿来即用
Vue实现星级评价效果
回忆的夏天
12-29 1016
我们把星级评价单独做成一个Star组件，抽离出来，其中父组件中引入(传入的是评分的值) <div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div> 初始Star.vue <template> <div> <div ...
javascript 星星点灯
weixin_46174785的博客
03-14 218
<style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } #star{ width: 800px; margin: 50px auto; } #star p{ float: left; } .ss{ float: left; } .ss li{ position: relative; float: left; widt...
使用 JS 实现评星效果
Youareseeing的博客
06-24 752
评星要求：思路：默认 5 颗未被点亮的星星，要完成点亮星星很简单，就是一个图片替换的过程。难点：是如何得到你所点击的星星的下标。解决方法：通过遍历数组，再通过 this 这个函数得到下标即可。最后再根据下标完成要求。放代码： 注：var index=1000; index是随便取得一个数字，for(var j=0;j...
js版星级评分 入门级 原生js实现
椿湫小屋丶
07-05 1385
纯原生js版星级评分
使用vue简单实现星级评价
gergerfrgegregfd的博客
11-08 2760
使用vue简单实现星级评价
JS星星评分
Biu233的博客
01-04 607
这里写自定义目录标题一个支持小数的星星评分 一个支持小数的星星评分 最近在开发过程中遇到了这个星星评分的需求，就自己写了一个。尽量的简化代码，支持多个、支持循环。废话不多说，直接上代码。 首先引入JQ <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> css部分 ....
【JavaScript】实现星级评论
Ai-Fairy的博客
08-30 1067
我们在网购的时候，经常看见给商品评论五星好评，那么这个星级评论是怎么实现的呢？
vue实现星级评分
weixin_39065287的博客
10-15 2504
1、vue实现星级评分 实现效果 实现代码 <template> <div> <ul class="ulcss"> <li v-for="(item, index) in starList" :key="index"> <img v-if="item.isShowStar" src="../assets/star.svg" alt=""> <img
js等级评分效果（星星实现打分功能）
01-20
js等级评分效果（星星实现打分功能） 和csdn下面的评论上的星星差不多
js 实现 评星效果
03-30
js 实现 评星效果! 值得下载看看!资源免费,大家分享!!
vue实现评价星星功能
10-15
主要为大家详细介绍了vue实现评价星星功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ASP.NET 一个简易的评分星星Demo
08-25
一个最简易的评分星星的Demo 用鼠标能够点亮的星星
vue实现评价星星功能（代码全）
boy火巨的博客
06-26 5544
代码： <template> <ul class="StarsWrap"> <li v-for="(i,index) in list" :key="index" @click="clickStars(index)"> <img :src="xing>index?stara:starb"/&...
Vue.js 点击星星进行评价
渐离生死的博客
12-05 6526
1、评价等级（1、2、3、4、5）星 2、支持显示平均评价半星，不支持评价点击星星的时候半星 效果如图： 初始化显示： 点击星星显示： 步骤 CSC：添加一个显示全星，半星，空星的样式 JS: 如下，自定义一个组件 const LENGTH = 5; const CLS_ON = 'icon-grade-full'; // 全星 const CLS_
JS - 点亮星星评分
小白
03-02 1603
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;点亮星星评分&lt;/title&gt; &lt;/head&gt; &lt;body onload="test()&quo
Vue写评价星星特效
姚辉乾
09-27 2719
<template> <div> <div class="star"> <span>星级评定</span> <div class="starXin" v-for="(item,index) in list" :key='index'> <div @...
vue实现一个星级打分效果_vue 星星评分组件
最新发布
05-16
下面是一个简单的 Vue 星级评分组件的实现： ```html <template> <div class="rating"> <span v-for="(star, index) in stars" :class="['star', star]" :key="index" @click="select(index)"> </span> </div> </template> <script> export default { props: { value: { type: Number, default: 0 }, max: { type: Number, default: 5 } }, data() { return { stars: [] } }, mounted() { this.updateStars() }, methods: { updateStars() { this.stars = [] for (let i = 0; i < this.max; i++) { this.stars.push(i < this.value) } }, select(index) { this.value = index + 1 this.$emit('input', this.value) this.updateStars() } } } </script> <style> .star { display: inline-block; width: 24px; height: 24px; background: url(star.png) no-repeat; background-size: contain; cursor: pointer; } .star:hover, .star.active { background-position: 0 -24px; } </style> ``` 使用方式： ```html <template> <div> <h3>我的评分：{{ rating }}</h3> <star-rating v-model="rating"></star-rating> </div> </template> <script> import StarRating from './StarRating.vue' export default { components: { StarRating }, data() { return { rating: 3 } } } </script> ``` 其中，star.png 是一张包含两个星星的图片，第一个星星是默认状态，第二个星星是激活状态。 这个组件的实现很简单，通过 props 接收评分值和最大值，然后用一个数组来表示星星的激活状态，点击某个星星时更新评分值和星星状态，通过事件向父组件传递更新后的评分值。最后，用 CSS 来实现星星的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值