原生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 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
随机推荐
- POJ 2406 Power Strings next数组循环节应用、
题意:就给出个字符串做*的定义.a^0 = "" (the empty string) and a^(n+1) = a*(a^n). 题目要求n的最大值. 思路: 化简上面的 ...
- HDU 1875 最小生成树prim算法
#include<iostream> #include<cstdio> #include<algorithm> #include<cmath> #inc ...
- 利用arguments求任意数量数字的和/最大值/最小值
文章地址 https://www.cnblogs.com/sandraryan/ arguments是函数内的临时数据,用完销毁,有类似于数组的操作,但不是数组. 举个栗子1:利用arguments求 ...
- java框架之shiro
#shiro简介 一.简介 Apache Shiro 是一个强大而灵活的开源安全框架,可以用于应用程序的身份验证,授权,会话管理和加密. Authentication:有时也简称为“登录”,这是一个证 ...
- Flex AIR使用ADT命令打包 ipa
1. 配置环境变量. 2. 测试adt命令 3. 将ShepherdPhone0815.mobileprovision和 my.p12文件都放入编译好的工程目录下,如下图: 4.切换到上述编译好的目录 ...
- 2018-8-10-win10-uwp-调试软件启动
title author date CreateTime categories win10 uwp 调试软件启动 lindexi 2018-08-10 19:16:51 +0800 2018-03-0 ...
- 解决input number类型上下滚动 禁用滚轮事件
1.去掉input在type="number"时的上下箭头 <style> input::-webkit-outer-spin-button,input::-webki ...
- vue-cil 打包爬坑（解决）
1.打包成功不报错,但是打开页面啥都没有? 解决:文件位置:config目录下index.js文件更改assetsPublicPath属性:文件里面有两个assetsPublicPath属性,也就是 ...
- 【9103】求n的累加和
Time Limit: 10 second Memory Limit: 2 MB 问题描述 用高精度方法,求s=1+2+3+...+n的精确值(n以一般整数输入) Input 文件输入仅一行,输入n ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...