<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. NOIP2017普及组翻车记

    我就是一个这么个人:平常训练好好的,一到考场就炸. 不管是NOIP还是考试都是这样. 比赛时我脑抽,第二题相减后,居然一点一点地模10. 后来觉得很慢,用近乎一个小时时间,打了另一个方法(不是字典树, ...

  2. 如何正确使用 Flink Connector？

    本文主要分享 Flink connector 相关内容,分为以下三个部分的内容:第一部分会首先介绍一下 Flink Connector 有哪些.第二部分会重点介绍在生产环境中经常使用的 kafka c ...

  3. SQL Server代码如何快速格式化，sqlserver代码

    在SQL Server中我们经常需要编写各种SQL脚本,例如存储过程和函数等,由于在编写过程中,经常会进行调整,有些关键字我们用的大写,有的我们用的小写,有的后面结束用:分割有的又没有.对于有强迫症的 ...

  4. shell 启动脚本

    启动脚本是bash启动时自动执行的脚本.用户可以把一些环境变量的设置和alias.umask设置放在启动脚本中,这样每次启动Shell时这些设置都自动生效.思考一下,bash在执行启动脚本时是以for ...

  5. Linux Shell脚本经典案例

    开头加解释器:#!/bin/bash    语法缩进,使用四个空格:多加注释说明.    命名建议规则:变量名大写.局部变量小写,函数名小写,名字体现出实际作用.    默认变量是全局的,在函数中变量 ...

  6. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  7. js之简单工厂模式

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...

  8. mysql load date to Hbase

    一.mysql迁移数据进hbase需要配置好配置文件 用sqoop 命令进行迁移 二. 配置文件内容: import--connectjdbc:mysql://172.18.32.99:3306/te ...

  9. tensorflow中张量的理解

    自己通过网上查询的有关张量的解释,稍作整理. TensorFlow用张量这种数据结构来表示所有的数据.你可以把一个张量想象成一个n维的数组或列表.一个张量有一个静态类型和动态类型的维数.张量可以在图中 ...

  10. 通过游戏学python 3.6 第一季 第九章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改--锁定账号--锁定次数--菜单功能'menufile

      通过游戏学python 3.6 第一季 第九章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改--锁 ...