<style>
        *{margin: 0;padding: 0;}
        .pingfen{ width: 195px; margin:10px auto; height:20px; position: relative;}
        .pingfen ul{height:35px; margin-bottom: 10px;}
        .pingfen li{ width: 35px;margin-left: 4px; float: left; height: 35px; cursor: pointer; background:    url(/public/nrmap/img2/fstar2.png) no-repeat center center; list-style: none;}
        .pingfen .active{background: url(/public/nrmap/img2/fstar1.png) no-repeat center center;}
        .pingfen p{
            position: absolute; top:24px; left: 0px; width: 134px; height: 28px;
            background: #fff; line-height: 28px; text-align: center; border:1px solid #333;
            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.style.marginTop="30px";
                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(aData[this.index]);    
        };     
   }   
 };
</script>

<body>
<div id="rank" class="pingfen"> 
   <ul>    
      <li></li>  
      <li></li>  
      <li></li>  
      <li></li>    
      <li></li>  
  </ul>   
 <p>加载中</p>  
 </div>
</body>

JS原生实现五角星评价详情demo的更多相关文章

  1. 用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介

    在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...

  2. JS原生实现视频弹幕Demo（仿）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  4. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  5. js原生回到顶部

    <!DOCTYPE html><html><head> <meta content="测试demo" name="Keyword ...

  6. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  7. 使用jQuery.makeArray() 将多种类型转换成JS原生Array

    jQuery.makeArray(obj)这个函数从名字上来看非常easy猜出它的用途:应该是用来将传入的对象转换成一个原生array 再看看官网上对它的解释:Convert an array-lik ...

  8. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  9. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

随机推荐

  1. Istio流量管理实践之(3): 基于Istio实现流量对比分析

    流量镜像 流量镜像,也称为影子流量,流量镜像提供一种尽可能低的风险为生产带来变化的强大功能.镜像会将实时流量的副本发送到镜像服务.镜像流量发生在主服务的关键请求路径之外. 在非生产或者测试环境中,尝试 ...

  2. Ionic 新闻类别菜单

    1.效果图   2.controller .js .controller("ProductCtrl", function ($scope,$ionicModal,$ionicScr ...

  3. dubbo入门学习(四)-----dubbo配置

    配置来源 首先,从Dubbo支持的配置来源说起,默认有四种配置来源: JVM System Properties,-D参数 Externalized Configuration,外部化配置 Servi ...

  4. PAT甲级——A1038 Recover the Smallest Number

    Given a collection of number segments, you are supposed to recover the smallest number from them. Fo ...

  5. OSG能够在当前帧截图，也就是能转换视角后马上截图

    #include <Windows.h> #include <osg/GraphicsContext> #include <osg/Group> #include ...

  6. 高斯消元和高斯约旦消元 Gauss（-Jordan） Elimination

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵. 在讲算法前先介绍些概念 矩阵的初等变换 矩阵的初等变换又分为矩阵的初等行变换和矩阵的初等列变换 ...

  7. linux在线用户管理

    LINUX是个多用户系统,一旦连接到网络中,它可以同时为多个登录用户提供服务.系统管理员可以随时了解系统中有那些用户,用户都在进行什么操作. 1.查看该系统在线用户 系统管理员若想知道某一时刻用户的行 ...

  8. 用户测评 | EDAS Serverless 上手体验

    背景 最初, 是因为对 Serverless 这一概念感兴趣, 所以开始试用阿里云函数计算,使用过程中感受到了函数计算快速.按需付费和弹性伸缩等方面的优势,随后我在天气预报.发送短信等场景下开始了更深 ...

  9. 因子分析spss怎么做 spss因子分析教程及结果解释

    因子分析spss怎么做 spss因子分析教程及结果解释 因子分析spss可以简化数据结构,将具有错综复杂关系的变量综合为数据较少的因子,在信息损失最小的情况下对变量进行分类,不过有些朋友多spss因子 ...

  10. applyMiddleware源码中的闭包

    闭包都是个老掉牙的话题了,这次又提起,是因为重看Redux源码时发现了applyMiddleware里的用法很巧妙.我们先看一个简单的例子. var a = (num) => num + 1 v ...