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

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

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>

实现简单的打星（打分）效果相关推荐

c语言程序设计编写钻石图形,C++简单输出钻石菱形图效果
C++简单输出钻石菱形图效果本文实例讲述了C++简单输出钻石菱形图效果的方法.分享给大家供大家参考,具体如下: /* * 作者: 刘同宾 * 完成日期:2012 年 11 月 25 日 * 版本 ...
行星轨迹制作_好看的星球轨迹是怎么制作的 PS制作星轨效果详细教程
大家知道怎么制作好看的星轨效果吗?其实制作的方法很简单,如果你会使用首先你将原图照片导入到PS中,然后在图层中拷贝一个图层出来(快捷键CTRL+J).并将图层的类型调整为[变亮]. 接着你将该图层使 ...
简单的UIButton按钮动画效果iOS源码
这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 使用时把ButtonA ...
css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
html效果浮窗效果,jQuery简单实现中间浮窗效果
本文实例讲述了jQuery简单实现中间浮窗效果.分享给大家供大家参考,具体如下: basic.css: /* * -- 样式说明 -- * 最大优先实现法,全局能实现不用区域,区域能实现不用模板,模板 ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
使用CollectionView简单实现轮播广告栏效果
使用CollectionView简单实现轮播广告栏效果当自己在做项目时感觉老是得重复写一些广告栏,嫌麻烦,所以自己简单封装了一个广告栏,不足之处希望大家指出,下面简单写下部分代码供大家参考: - V ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...

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

实现简单的打星（打分）效果相关推荐

最新文章

热门文章