<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. DataLakeAnalytics: 解析IP地址对应的国家城市地址的能力

    Data Lake Analytics 作为云上数据处理的枢纽,最近加入了通过IP地址查找对应的国家.省份.城市.ISP的函数, 今天带大家体验一下. 函数详细介绍 本次一共添加了下面这些函数: ip ...

  2. HZOI2019 A. 那一天我们许下约定 dp

    题目大意:https://www.cnblogs.com/Juve/articles/11219089.html 读这道题的题目让我想起了... woc我到底在想什么?好好写题解,现在不是干那个的时候 ...

  3. Django项目：CRM(客户关系管理系统)--85--75PerfectCRM实现CRM扩展权限

    # sales_urls.py # ————————47PerfectCRM实现CRM客户报名流程———————— from django.conf.urls import url from bpm. ...

  4. Django项目：CRM(客户关系管理系统)--77--67PerfectCRM实现CRM课程出勤排名

    # classtop_urls.py # ————————64PerfectCRM实现CRM课程排名详情———————— from django.conf.urls import url from b ...

  5. Django项目：CRM(客户关系管理系统)--71--61PerfectCRM实现CRM学生上传作业

    # student_urls.py # ————————60PerfectCRM实现CRM学生上课记录———————— from django.conf.urls import url from bp ...

  6. idea如何清晰地查看java类的继承结构及该类的所有方法?

    转载自:https://blog.csdn.net/luo609630199/article/details/82192938 我们在世用idea是平时除了编码外,有时我们需要查看源码或者别人写的代码 ...

  7. [转]C#接收邮件

    最近由于工作需要,接触到了邮件服务器.以前我用CF写过,感觉没有什么,我想用C#来实现会更简单,但是万万没想到C#没有提供邮件接收的方法,令我很不解.通过我在网上查找,发现了一个国外公司写好的接收邮件 ...

  8. 第15章 RMAN备份 ​

    第15章 RMAN备份 oracle推荐的备份工具是rman(恢复管理器:recovery manager),用操作系统命令执行的备份被称为用户管理的备份.使用rman执行的备份被称为服务器管理备份. ...

  9. Django--csrf跨站请求伪造、Auth认证模块

    form表单中使用跨站请求伪造 { % csrf_token % } 会动态生成一个input框,内部的value是随机刷新的 如果不想校验csrf from django.views.decorat ...

  10. 线性求所有数模p的乘法逆元

    推理: 假如当前计算的是x在%p意义下的逆元,设$p=kx+y$,则 $\Large kx+y\equiv 0(mod\ p)$ 两边同时乘上$x^{-1}y^{-1}$(这里代表逆元) 则方程变为$ ...