关闭

原生js实现的星级评分效果

标签: javascriptjs星级js评分效果js评分特效js星级特效
4942人阅读 评论(0) 收藏 举报
分类:

原文:原生js实现的星级评分效果

源代码下载地址:http://www.zuidaima.com/share/1795685450615808.htm


写个最简单的原生js的星级评分

Html代码

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


Css代码

<style type="text/css">     
 *{margin: 0;padding: 0;}     
 .pingfen{ width: 135px; margin:10px auto; height:20px; position: relative;}     
 .pingfen ul{height:20px; margin-bottom: 10px;}     
 .pingfen li{ width: 20px; float: left; height: 20px; cursor: pointer; background:    url(star.png) no-repeat 0 0; list-style: none;}    
  .pingfen .active{background: url(star.png) no-repeat 0 -28px;}   
   .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>  
JS代码:
<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.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(this.index +1);  
        };  
    }  
  
};  
</script>  

 

运行截图:

转载:http://xiaomiya.iteye.com/blog/2035333

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JSP评价系统

  • 2015-05-21 18:44
  • 19.97MB
  • 下载

2颗星星+纯CSS实现星星评分交互效果

折腾:2颗星星+纯CSS实现星星评分交互效果 转载自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=3568 一、星星点灯,照亮我的家门 大家都喜欢听故事...
  • u014492098
  • u014492098
  • 2014-11-29 11:59
  • 1972

【HTML】仿淘宝五星评价显示任何分数

最近做项目做到一个五星评分的,这个分数的显示,要精确到小数,就是如果分数是4.3分,就显示4.3颗星星,这个看上去好像挺难的,但是做起来很简单。 首先我们整理一下思路,这效果要怎么做出来,因为这个分数的原因,很容易让人联想到进度条,所以就想到了用遮罩来出来。做法很简单,灰色星星的图片放在下面,然后亮...
  • LZGS_4
  • LZGS_4
  • 2015-08-23 22:51
  • 8414

jsp选课、评分系统

  • 2012-04-15 16:13
  • 6.07MB
  • 下载

原生js星星评分

  • 2017-07-20 10:14
  • 4KB
  • 下载

js等级评分效果(星星实现打分功能)

  • 2010-01-20 09:03
  • 983B
  • 下载

JS 实现简单星星评分功能

思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
  • mixi9760
  • mixi9760
  • 2016-07-26 19:29
  • 3157

js实现星级评分(第一种实现方式)

1.新建一个Dynamic Web Project项目,里面新建一个jsp文件,加入一张评分星星图片,星星图片和整体框架如图所示: 2.index.jsp里面的代码如下所示: <%@ page language="java" contentType="...
  • qq_29656961
  • qq_29656961
  • 2017-10-04 11:47
  • 261

【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示,这篇博文将介绍如何实现打分的效果。 首先,我们还是先分析我们想要的效果。 1.当鼠标移到星星上面的时候,当前星星以及前面的星星要亮起来,然后星星的右侧出现提示语,1星:很差,2星:比较差,3星:一般,4星:比较好,5星:很好。 2.当鼠标点击的时候,打分,这个...
  • LZGS_4
  • LZGS_4
  • 2015-08-23 23:05
  • 5316

纯js实现类似淘宝星级评分功能

使用js实现简单星级评分
  • qq_35034870
  • qq_35034870
  • 2017-05-02 21:37
  • 500
    About Me
    扫描关注最代码微信公众号。

    自由、简单、快乐
    学习网站:java源代码学习
    个人资料
    • 访问:4362743次
    • 积分:38967
    • 等级:
    • 排名:第118名
    • 原创:665篇
    • 转载:89篇
    • 译文:1篇
    • 评论:1291条
    友情链接
    博客专栏