原生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 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- DOM常用操作，Sass基础
一个元素的子元素个数ParentNode.childElementCount 只读属性返回一个无符号长整型数字,表示给定元素的子元素数. 取消当前事件e.preventDefault();有时候我们选 ...
- 嵌套app ，的h5分支 项目 （分享，保存图片，返回app）
function callAppBridge(func, argObj) { const app = window.webkit || window.app; const args = typ ...
- linux主次编号
字符设备通过文件系统中的名子来存取. 那些名子称为文件系统的特殊文件, 或者设备文 件, 或者文件系统的简单结点; 惯例上它们位于 /dev 目录. 字符驱动的特殊文件由使用 ls -l 的输出的第一 ...
- 给js加版本号解决浏览器缓存问题
我们知道打开网页时浏览器会加载需要的资源,比如图片.音频.js文件.css文件等.并且会把这些资源作为缓存保存下来,再次打开网页时缓存好的资源就不需要再次加载了.但是,这样有一个问题,就是当程序猿更新 ...
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理（13）之会员登录注册
源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c 会员中心,是我们与用户交 ...
- HttpServletRequest获得Url里面传来的值
URL地址:http://XXXXX/manage/welcome?loginUser=123456String []str = request.getParameterValues("lo ...
- 20191029校内ACM部分题解
20191029校内ACM部分题解 https://codeforces.com/group/32W4q7bPme/contest/257710 B数学 给定一个在\([0,1]\)等概率随机区间的随 ...
- 原 Linux：ping不通baidu.com
如果某台Linux服务器ping不通域名, 如下提示: [root@localhost ~]# ping www.baidu.com ping: unknown host www.baidu.com ...
- H3C重启设备
- classpath*与classpath
classpath*:的出现是为了从多个jar文件中加载相同的文件. classpath:只能加载找到的第一个文件.