写个最简单的原生js的星级评分:

  1. <div id="rank" class="pingfen">
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. </ul>
  9. <p>加载中</p>
  10. </div>
  1. <style type="text/css">
  2. ;}
  3. .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;}
  4. .pingfen ul{height:20px; margin-bottom: 10px;}
  5. ; list-style: none;}
  6. -28px;}
  7. ; display:none;}
  8. </style>
  1. <script>
  2. var aData =["很差","较差","一般","推荐","力推"];
  3. window.onload=function(){
  4. var oDiv = document.getElementById("rank");
  5. var aLi = oDiv.getElementsByTagName("li");
  6. var oP = oDiv.getElementsByTagName("p")[0];
  7. var i =0;
  8. for(i=0;i<aLi.length;i++){
  9. aLi[i].index = i;
  10. aLi[i].onmouseover = function(){
  11. oP.style.display = "block";
  12. oP.innerHTML=aData[this.index];
  13. for(i=0; i<=this.index;i++){
  14. aLi[i].className="active";
  15. }
  16. };
  17. aLi[i].onmouseout = function(){
  18. oP.style.display = "";
  19. for(i=0; i<aLi.length; i++){
  20. aLi[i].className="";
  21. }
  22. };
  23. aLi[i].onclick=function(){
  24. alert(this.index +1);
  25. };
  26. }
  27. };
  28. </script>

ok超级简单不信你试试。

原生javascript星级评分的更多相关文章

  1. javascript星级评分(多个)

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  2. JavaScript星级评分

    事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. JavaScript星级评分,仿百度,增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  4. 原生JavaScript实现评分效果

    一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...

  5. 原生JS实现-星级评分系统

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star();使用默认值5个星星,默认信息 var msg = [........]; sufuStar.sta ...

  6. js星级评分点击星级评论打分效果

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

  7. js星级评分点击星级评论打分效果--收藏--转载

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

  8. js实现星级评分效果(非常规5个li代码)

    1. 前言 此方案受到JS单行写一个评级组件启发,自己写了一个简单Demo. 功能有正常滑动,动态显示实心星星个数:当点击确认,则保持当前的实心星星个数:再移动时未点击,则离开后还是保持之前的状态. ...

  9. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

随机推荐

  1. 图解最小生成树 - 普里姆(Prim)算法

    我们在图的定义中说过,带有权值的图就是网结构.一个连通图的生成树是一个极小的连通子图,它含有图中全部的顶点,但只有足以构成一棵树的n-1条边.所谓的最小成本,就是n个顶点,用n-1条边把一个连通图连接 ...

  2. Unix环境高级编程(六)进程控制

    本章介绍Unix的进程控制,包括进程创建,执行程序和进程终止,进程的属性,exec函数系列,system函数,进程会计机制. 1.进程标识符 每一个进程都有一个非负整数标识的唯一进程ID.ID为0表示 ...

  3. (二)RocketMq入门之消息发送和接收

    一.消息产生.发送 public class Producer { public static void main(String[] args) throws MQClientException { ...

  4. python标准库介绍——8 operator 模块详解

    ==operator 模块== ``operator`` 模块为 Python 提供了一个 "功能性" 的标准操作符接口. 当使用 ``map`` 以及 ``filter`` 一类 ...

  5. java 常见判断题

    1 根据下面的代码,String s = null;会抛出NullPointerException异常的有(). ) ) ) ) ) ) ) ) 说明:逻辑运算符:&&和|| 是按照“ ...

  6. 独立成分分析(Independent component analysis, ICA)

    作者:桂. 时间:2017-05-22 12:12:43 链接:http://www.cnblogs.com/xingshansi/p/6884273.html 前言 今天群里冒出这样一个问题:群里谁 ...

  7. 今天遇到的一个bug,折腾了一早上,不过解决了,还是很高兴

    1.总结出错的问题 当我在用flask做项目的时候,需要创建表,创建表的时候,我用的是Flask-Migrate组件,直接用python manage.py init ,python manage.p ...

  8. &lt;图形图像,动画,多媒体&gt; 读书笔记 --- AirPlay

    AirPlay技术是之前一直没有接触过的技术,正好这次做一个笔记 共用: 1.能够通过AirPlay将iOS和MAC设备上的视频或音频输出到高清电视上或高保真音响 2.能够通过AirPlay将iOS和 ...

  9. 【Android】16.4 IntentService类

    分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 为了进一步简化Intent过滤器的用法,Android系统又提供了一个IntentService类,这样一来,你也 ...

  10. 【Android】12.1 Intent基本概念

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Intent:意图,含义就是你想利用它调用哪个组件实现相关的功能,比如调用相机组件实现拍照.调用Contact组件 ...