原生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 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- springboot 实现 aop
pom.xml 导入 springboot aop 依赖 <dependency> <groupId>org.springframework.boot</groupId& ...
- Flex AIR使用ADT命令打包 ipa
1. 配置环境变量. 2. 测试adt命令 3. 将ShepherdPhone0815.mobileprovision和 my.p12文件都放入编译好的工程目录下,如下图: 4.切换到上述编译好的目录 ...
- Python--day47--mysql索引注意事项
- 2018-8-10-如何入门-C++-AMP-教程
title author date CreateTime categories 如何入门 C++ AMP 教程 lindexi 2018-08-10 19:16:51 +0800 2018-2-13 ...
- win10 uwp 使用 AppCenter 自动构建
微软在今年7月上线 appcenter.ms 这个网站,通过 App Center 可以自动对数千种设备进行适配测试.快速将应用发送给测试者或者直接发布到应用商店.做到开发的构建和快速测试,产品的遥测 ...
- 【9101】求n!的值
Time Limit: 10 second Memory Limit: 2 MB 问题描述 用高精度的方法,求n!的精确值(n的值以一般整数输入). Input 文件输入仅一行,输入n. Output ...
- H3C 路由优先级
- tomcat下的work目录和temp目录
1. tomcat下的work目录 1 用tomcat作web服务器的时候,部署的程序在webApps下,这些程序都是编译后的程序(发布到tomcat的项目里含的类,会被编译成.class后才发 ...
- linux 安装一个共享的处理者
共享中断通过 request_irq 来安装就像不共享的一样, 但是有 2 个不同: SA_SHIRQ 位必须在 flags 参数中指定, 当请求中断时. dev_id 参数必须是独特的. 任何模块地 ...
- POJ 3660 Cow Contest(floyed运用)
Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...