通过原生JS实现打分（打星）效果
原创
要实现一个简单的打星效果，分为以下几步，简单来说，先这样。。。然后那样。。。再这么着。。。就好了！！！
<!--第一步，获取一个iconfont的星星（自行下载，本文星星素材来源于阿里矢量图库-->
css代码如下：
<link rel="stylesheet" href="font_ifs74hen68/iconfont.css">
<style>section{width: 300px;height: 200px;margin: 0 auto;border:1px solid pink;line-height: 200px;}section span:not(.one){color: pink;}section span:last-child{width: 100px;box-sizing: border-box;border:1px solid black;}</style>html文件如下：
<body>
<section> <span class="iconfont icon-xingxing"></span> <span class="iconfont icon-xingxing"></span> <span class="iconfont icon-xingxing"></span> <span class="iconfont icon-xingxing"></span> <span class="iconfont icon-xingxing"></span> <span class="one"></span></section>然后我们就把星星放到页面了如下图所示
image.png
然后就要进行JS操作了
如下，首先获取元素
var oSpans=document.querySelectorAll('span')var oSpan=document.querySelector('.one')<!--再建立一个数组，内容是我们分别要在几颗星后所对应的显示内容，后面会用到-->
var arr=['垃圾','较差','一般','还可以','很好']<!--接着我们就要做效果了，因为要实现鼠标移入出现效果，移出取消预览效果，点击确定效果，所以需要加入三个事件，为了方便获取点击位置并添加相应效果，我们要为点击内容获取该下标-->
for (let i = 0; i < oSpans.length; i++) {oSpans[i].setAttribute('index',i)oSpans[i].addEventListener('mouseover',fn1)oSpans[i].addEventListener('mouseout',fn2)oSpans[i].addEventListener('click',fn3)}<!--移入事件如下，我们需要为所点击的对象及之前所有的星星进行效果添加-->
function fn1() {var num=this.getAttribute('index')oSpan.innerHTML=arr[num]for (let y = 0; y <= num; y++) {oSpans[y].style.color='orange' } }<!--移出事件如下-->
function fn2() {var num1=this.getAttribute('index')for (let y = 0; y <= num1; y++) {oSpans[y].style.color=' ' }}<!--点击是，我们需要为所点击的星星及前面的所有星星去掉移出事件，就可以使得星星获得持续颜色-->
function fn3() {var num=this.getAttribute('index')for (let y = 0; y <= num; y++) {oSpans[y].removeEventListener('mouseout',fn2)}}</body>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读