JS实现五星好评效果

效果图

css部分

         li{list-style: none;display: inline-block;width: 27px;height: 27px;background: url(img/star.gif) no-repeat 0px 0px;}

html部分

 <body><ul><li></li><li></li><li></li><li></li><li></li></ul></body>

js部分

     <script type="text/javascript">window.onload=function(){var arr=document.getElementsByTagName("li");for(let i=0;i<arr.length;i++){arr[i].index=i;//将索引值当作对象的属性绑定arr[i].onclick=function(){for(let j=0;j<arr.length;j++){//遍历使所有的星星变暗arr[j].style.backgroundPosition="0px 0px";}for(let j=0;j<this.index+1;j++){//根据所点的星星所在位置，使前边的星星变亮arr[j].style.backgroundPosition="0px -29px";}}}}</script>

JS实现五星好评效果相关推荐

Android好评功能,Android自定义View实现五星好评效果
本文实例为大家分享了Android实现五星好评效果的具体代码,供大家参考,具体内容如下这个效果想必大家都非常熟悉,那么Android如何自定义实现这种效果呢? 首先自定义属性: 下面看看具体实现: ...
Vue_实现五星好评效果
一.前言我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果二.主要内容 1.将五星写在一个复用组件里面(因为在很多地方都会用到) <tem ...
网页前端实现五星好评效果
整体代码可分为三部分:css样式.HTML主体.js函数 1.css样式 #score1 i {vertical-align: middle;display: inline-block;width: ...
vue制作五星好评效果
1.先在父组件创建star组件,自定义分数,传值过去子组件 2.子组件接收父组件传过来的score 3. 定义一下类名的常量通过计算属性computed 这里是css样式效果如下:
JS与JQuery分别实现淘宝（五星好评特效）
我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件代码展示: <!D ...
五星好评的三种方法（原生js）
先展示js代码 /*//01 // 获取节点 var starCollection = document.getElementsByClassName('star-item'); //每个元素都要有点 ...
js实现五星评分的效果
今天在做后台管理系统的时候,有一个需求是要给完成的任务评分,用星级显示,网上查找了一些实现方法,发现有两种方法相对来说比较简单有效. 我在这整理一下这两种方法,以后出现类似的需求可以直接拿来用了. 方 ...
php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
前端实践小项目(一)五星好评与暂停取值
哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 "五星好评与暂停取值"(底部有源代码) 目录五星好评(JS版) 五星好评(JQuery版) 暂停取值五星好评(JS版) ...

JS实现五星好评效果

效果图

css部分

html部分

js部分

JS实现五星好评效果相关推荐

最新文章

热门文章