实现简单的打星（打分）效果

最新推荐文章于 2024-05-04 07:32:37 发布

Mike_JioDan

最新推荐文章于 2024-05-04 07:32:37 发布

阅读量945

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Mike_JioDan/article/details/121960243

版权

要实现一个简单的打星效果，分为以下几步，简单来说，先这样。。。然后那样。。。再这么着。。。就好了！！！

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>

Mike_JioDan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现简单的打星（打分）效果

要实现一个简单的打星效果，分为以下几步，简单来说，先这样。。。然后那样。。。再这么着。。。就好了！！！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:n
复制链接

扫一扫