原生JavaScript实现评分效果
一、实现原理：
1、要设置一个“大总管变量”，用于记录点击时的星星下标，只声明不赋值。
2、移入每个星星时，先把所有的星星恢复到默认状态；再把当前星星及在它之前的星星设为选中状态。
3、移出每个星星时，先把所有的星星恢复到默认状态；再把大总管变量里记录的星星及在它之前的星星设为选中状态。
4、点击星星时，把当前星星的下标赋值给大总管变量；再把当前星星及在它之前的星星设为选中状态。
二、代码展示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul,li{ list-style: none; }
li{display:block;float: left; width: 21px; height: 21px;background: url(http://files.cnblogs.com/files/susufufu/star0.gif) no-repeat;}
li.on{background: url(http://files.cnblogs.com/files/susufufu/star1.gif) no-repeat;}
</style>
</head>
<body>
<ul id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName('li');
var lislength = lis.length;
//大总管变量
var num;
for (var i = 0; i < lislength; i++) {
//给每一个li加下标
lis[i].index = i;
lis[i].onmouseover = function(){
//鼠标进入时，先把所有的星星恢复到默认状态
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把当前星星以及它前面的星星设为选中状态
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
};
lis[i].onmouseout = function(){
//鼠标离开时，先把所有的星星恢复到默认状态
for(var j=0;j<lislength;j++){
lis[j].className = '';
}
// 把点击过的星星及它前面的星星设为选中状态
for(var j=0;j<=num;j++){
lis[j].className = 'on';
}
};
lis[i].onclick = function(){
//点击时，把当前的星星下标赋值给大总管变量，再把它前面的星星设为选中状态
num = this.index;
for(var j=0;j<=this.index;j++){
lis[j].className = 'on';
}
}
}
}
</script>
</body>
</html>
原生JavaScript实现评分效果的更多相关文章
- 纯原生javascript实现分页效果
随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...
- 原生JavaScript实现新手引导效果（第二个玩具）
慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- 原生 JavaScript 图片裁剪效果
图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...
- 原生javascript实现分页效果+搜索功能
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
- 原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...
- javascript学习-原生javascript的小特效（多个运动效果整理）
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- [JavaScript] js 迅雷评分效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- [转载] linux find 命令
转载自 http://www.jb51.net/os/RedHat/1307.html Linux下find命令在目录结构中搜索文件,并执行指定的操作. Linux下find命令提供了相当多的查找条件 ...
- 洛谷P1809 过河问题 经典贪心问题
作者:zifeiy 标签:贪心 题目链接:https://www.luogu.org/problem/P1809 我们假设第 \(i\) 个人过河的耗时是 \(t[i]\) ,并且 \(t[i]\) ...
- laravel的Eloquent关联关系
1.简介: 1>Eloquent 关联关系以Eloquent模型类方法的形式被定义(是模型类的一个方法). 2>同 Eloquent 模型本身一样,关联关系也是强大的查询构建器,定义关联关 ...
- CF1055F Tree and XOR
CF1055F Tree and XOR 就是选择两个数找第k大对儿 第k大?二分+trie上验证 O(nlognlogn) 直接按位贪心 维护可能的决策点(a,b)表示可能答案的对儿在a和b的子树中 ...
- SpringBoot 上传文件到linux服务器 异常java.io.FileNotFoundException: /tmp/tomcat.50898……解决方案
SpringBoot 上传文件到linux服务器报错java.io.FileNotFoundException: /tmp/tomcat.50898-- 报错原因: 解决方法 java.io.IOEx ...
- Spring Security 学习笔记-securityContext过滤器过滤链学习
web.xml配置委托代理filter,filter-name默认与filter bean的名字保持一致. <filter> <filter-name>springSecuri ...
- 消息驱动Bean
消息驱动bean是专门用来处理基于消息请求的组件.MDB负责处理消息,而EJB容器则负责处理服务(事务,安全,并发,消息确认等),使Bean的开发者集中精力在处理消息的业务逻辑上. 消息驱动Bean. ...
- BIO、NIO、AIO 个人总结
BIO(blocking io) BIO即为阻塞IO,在网络编程中,它会在建立连接和等待连接的对端准备数据阶段进行阻塞.因此为了支撑高并发的用户访问,一般会为每一个socket 连接分配一个线程.但使 ...
- python3 实现删除数组中相同的元素
# #把数组中相同的元素去除 # #第一种方式: def del_repeatnum(s=[1,1,1,2,2,3,3,4]): s1=[] for i in s: print(i) if i not ...
- Linux使用expect和rsync实现密码自动输入无人值守自动同步备份
我们常用sudo,ssh.ftp命令操作服务器或者修改权限的时候都会要求输入password,但是shell脚本运行中该如何交互实现自动输入密码呢? 下面总结三种实现方法. 一.重定向:用重定向方法实 ...