原生javascript星级评分
写个最简单的原生js的星级评分:
- <div id="rank" class="pingfen">
- <ul>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- <p>加载中</p>
- </div>
- <style type="text/css">
- ;}
- .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;}
- .pingfen ul{height:20px; margin-bottom: 10px;}
- ; list-style: none;}
- -28px;}
- ; display:none;}
- </style>
- <script>
- var aData =["很差","较差","一般","推荐","力推"];
- window.onload=function(){
- var oDiv = document.getElementById("rank");
- var aLi = oDiv.getElementsByTagName("li");
- var oP = oDiv.getElementsByTagName("p")[0];
- var i =0;
- for(i=0;i<aLi.length;i++){
- aLi[i].index = i;
- aLi[i].onmouseover = function(){
- oP.style.display = "block";
- oP.innerHTML=aData[this.index];
- for(i=0; i<=this.index;i++){
- aLi[i].className="active";
- }
- };
- aLi[i].onmouseout = function(){
- oP.style.display = "";
- for(i=0; i<aLi.length; i++){
- aLi[i].className="";
- }
- };
- aLi[i].onclick=function(){
- alert(this.index +1);
- };
- }
- };
- </script>
ok超级简单不信你试试。
原生javascript星级评分的更多相关文章
- javascript星级评分(多个)
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- JavaScript星级评分,仿百度,增强版
JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 原生JavaScript实现评分效果
一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...
- 原生JS实现-星级评分系统
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...
- js星级评分点击星级评论打分效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js星级评分点击星级评论打分效果--收藏--转载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现星级评分效果(非常规5个li代码)
1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...
- jQuery动态星级评分效果实现方法
本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...
随机推荐
- go 学习 ---golang命令
1.GO命令一览 GO提供了很多命令,包括打包.格式化代码.文档生成.下载第三方包等等诸多功能,我们可以通过在控制台下执行 go 来查看内置的所有命令 下面来逐个介绍,也可以详细参考 https:// ...
- Unix环境高级编程(十三)守护进程
守护进程也称为精灵进程是一种生存期较长的一种进程.它们独立于控制终端并且周期性的执行某种任务或等待处理某些发生的事件.他们常常在系统引导装入时启动,在系统关闭时终止.unix系统有很多守护进程,大多数 ...
- 总结Codeigniter的一些优秀特性
总结Codeigniter的一些优秀特性 近期准备接手改进一个别人用Codeigniter写的项目.尽管之前也实用过CI,可是是全然按着自己的意思写的,没按CI的一些套路.用在公众的项目,不妨按框架规 ...
- cocos2dx当节点存在缩放时要注意的问题
cocos2dx(所有引擎也均如此),如果一个节点存在缩放,一定不要忘了其局部空间里的单位长度也会发生变化.其子节点位移,局部空间转世界空间结果等都会受影响. 有时候我们想将父节点的缩放转移到子节点中 ...
- perl内置特殊变量查询
perl中有许多预定于的内置变量,想$_,$,,$>,等等,基本是记不住全部的用法,如果在因特网查阅,有很麻烦,信息不准啦,说的不细啦,但是,万能的perldoc早就帮我们准备好了. 你需要做的 ...
- MySQL抓包工具:MySQL Sniffer 和性能优化
简介 MySQL Sniffer 是一个基于 MySQL 协议的抓包工具,实时抓取 MySQLServer 端的请求,并格式化输出.输出内容包访问括时间.访问用户.来源 IP.访问 Database. ...
- Linux操作系统及应用课程笔记 索引
第0部分 软件的安装与配置 Linux下软件的安装与配置 第1部分* 绪论 第2部分* Linux的安装过程 第3部分 系统Shell和经常使用命令 Shell文件相关经常使用命令及參数总 ...
- python ——面向对象进阶(反射,双下线方法,静态方法,类方法)
属性 如果你已经了解Python类中的方法,那么属性就非常简单了,因为Python中的属性其实是普通方法的变种. 哎,其实就是这样,我们看一下当我们想查看税后工资的时候,这其实是一个人的属性,但是它却 ...
- JQuery中eq()和get()的区别
众所周知,eq()方法返回的是一个JQuery对象,也就是[object Object]; get()方法返回的是DOM对象组成的数组,也就是[object HTMLLIElement]; 我们用一个 ...
- jQuery图片tab栏切换
<script> $(function(){ $('.tab li').mouseenter(function(){ var $this=$(this); var index=$this. ...