一、实现原理：

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实现评分效果的更多相关文章

  1. 纯原生javascript实现分页效果

    随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...

  2. 原生JavaScript实现新手引导效果（第二个玩具）

    慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...

  3. 原生javascript星级评分

    写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...

  4. 原生 JavaScript 图片裁剪效果

    图片裁剪程序效果如下,可鼠标操作.   拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...

  5. 原生javascript实现分页效果+搜索功能

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...

  6. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  7. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  8. [JavaScript] js 迅雷评分效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www ...

  9. 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

随机推荐

  1. pytorch中squeeze()和unsqueeze()函数介绍

    一.unsqueeze()函数 1. 首先初始化一个a 可以看出a的维度为(2,3) 2. 在第二维增加一个维度,使其维度变为(2,1,3) 可以看出a的维度已经变为(2,1,3)了,同样如果需要在倒 ...

  2. torch.nn.LSTM()函数维度详解

    123456789101112lstm=nn.LSTM(input_size,                     hidden_size,                      num_la ...

  3. H3C 帧中继配置示例

  4. Codeforces Round #180 (Div. 1 + Div. 2)

    A. Snow Footprints 如果只有L或者只有R,那么起点和终点都在边界上,否则在两者的边界. B. Sail 每次根据移动后的曼哈顿距离来判断是否移动. C. Parity Game 如果 ...

  5. java数组简介

    数组(Array)是Java 语言中内置的一种基本数据存储结构,通俗的理解,就是一组数的集合,目的是用来一次存储多个数据.数组是程序中实现很多算法的基础,可以在一定程度上简化代码的书写. 备注: 数组 ...

  6. Redux 认识之后进阶

    两个东西 action  状态 路由 以及嵌套路由 完整结构   进阶+源代码 源代码在我的 gitHub  存储库里面  https://github.com/Haisenan/Redux2.0

  7. PhpStorm terminal无法输入命令的解决方法

    下面小编就为大家带来一篇PhpStorm terminal无法输入命令的解决方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   在使用PhpStorm时,点击下面的 ...

  8. UVa 1374 - Power Calculus——［迭代加深搜索、快速幂］

    解题思路: 这是一道以快速幂计算为原理的题,实际上也属于求最短路径的题目类型.那么我们可以以当前求出的幂的集合为状态,采用IDA*方法即可求解.问题的关键在于如何剪枝效率更高.笔者采用的剪枝方法是: ...

  9. linux平台依赖性

    每个电脑平台有其自己的特点, 内核设计者可以自由使用所有的特性来获得更好的性能. in the target object file ??? 不象应用程序开发者, 他们必须和预编译的库一起连接他们的代 ...

  10. 【58.75%】【BZOJ 1087】[SCOI2005]互不侵犯King

    Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 3040  Solved: 1786 [Submit][Status][Discuss] Descri ...