写个最简单的原生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. SSAS 笔记

    SQL SERVER 2000创建多维数据集对应的cub文件   http://blog.csdn.net/zklth/article/details/6367816     http://msdn. ...

  2. [android] 网络断开的监听

    标签: android 网络监听 杂谈 分类: Android [转自]  http://blog.sina.com.cn/s/blog_5d5996d001012o07.html 其实手机在网络方面 ...

  3. exec系列函数和system函数

    一.exec替换进程映象 在进程的创建上Unix采用了一个独特的方法,它将进程创建与加载一个新进程映象分离.这样的好处是有更多的余地对两种操作进行管理.当我们创建 了一个进程之后,通常将子进程替换成新 ...

  4. Python 字典 popitem() 方法

    描述 Python 字典 popitem() 方法随机返回并删除字典中的一个键/值对(一般删除末尾对). 如果字典已经为空,却调用了此方法,就报出KeyError异常. 语法 popitem() 方法 ...

  5. 利用WGET下载文件,并保存到指定目录

    wget是Linux上一个非常不错的下载指令,也算是Linux工作者常用的指令之一 而这个指令我想在各大系统都预设有提供,包括了Ubuntu.Fedora等,而一般来说,要使用wget下载档案,只需要 ...

  6. python标准库介绍——26 getopt 模块详解

    ==getopt 模块== ``getopt`` 模块包含用于抽出命令行选项和参数的函数, 它可以处理多种格式的选项. 如 [Example 2-23 #eg-2-23] 所示. 其中第 2 个参数指 ...

  7. ThinkPad 预装win8换win7(软激活)

    今天晚上有人叫我给他装系统,没错!这就是计算机专业的拿手技能(维修学院重装系统专业Win7系统班^-^). 一拿手上,是lenovo的ThinkPad E430型号,预装的系统是win8,由于win8 ...

  8. canvas.drawBitmap(bitmap, src, dst, paint)

    // GameView.drawImage(canvas, mBitDestTop, miDTX, mBitQQ.getHeight(), mBitDestTop.getWidth(), mBitDe ...

  9. version `GLIBC_2.14' not found 解决方法.

    from http://blog.csdn.net/force_eagle/article/details/8684669 version `GLIBC_2.14' not found 解决方法. 一 ...

  10. HttpClient 教程 (一)

    转自:http://www.cnblogs.com/loveyakamoz/archive/2011/07/21/2112804.html HttpClient 教程 (一)   前言 超文本传输协议 ...