<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. node概览和安装

    一.node是一个平台环境,可以运行js代码的服务器端平台. 设计最初node是用来解决并发问题的,现在可以用来放在服务端使用. node平台的有优点:运行速度快,支持高并发,轻便.小巧 但是与jav ...

  2. 方法的重写（override）两同两小一大原则：

    方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类方法访问权限.

  3. tinyproxy 反向代理无法上网原因

      今天参照网上教程在服务器安装并配置了tinyproxy反向代理,此次安装反向代理的目的主要是通过内网连接上服务器,再使用服务器作为中转站进行上网.安装并启动的主要步骤如下 下载并安装tinypro ...

  4. 转载 ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（三） 激动人心的时刻到啦，实现1v1聊天

    ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天   看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器 ...

  5. java 异常捕获小记

    java 中异常捕获常用的为: try{ //业务代码 }catch(Exception e){ //异常捕获 }finally{ // 不管有无异常, 最后都会执行到这里 } 在方法体内如果想要把异 ...

  6. JDBC2 --- 获取数据库连接的方式二 --- 技术搬运工（尚硅谷）

    /** * 方式二,对方式一的迭代 * 在如下的程序中,不出现第三方的api,使得程序具有更好的可移植性. * @throws Exception */ @Test public void testC ...

  7. docker启动单节点server模式的consul | Bitdoom

    原文:docker启动单节点server模式的consul | Bitdoom docker启动单节点server模式的consul 2017-09-07 环境:MacOSX, consul_0.9. ...

  8. hbase 利用rowkey设计进行多条件查询

    摘要 本文主要内容是通过合理Hbase 行键(rowkey)设计实现快速的多条件查询,所采用的方法将所有要用于查询中的列经过一些处理后存储在rowkey中,查询时通过rowkey进行查询,提高rowk ...

  9. python 中文乱码问

    在本文中,以'哈'来解释作示例解释所有的问题,“哈”的各种编码如下: 1. UNICODE (UTF8-16),C854: 2． UTF-8,E59388: 3． GBK,B9FE. 一.python ...

  10. SSM三大框架整合教程

    前言 SSM就是Spring+SpringMvc+Mybatis,本文搭建一个基本的ssm框架 本文所有源代码包含jar包下载点击:https://download.csdn.net/download ...