教程集 > 脚本编程 > javascript > 正文 js星级评分实例代码

js星级评分实例代码

发布时间：2015-08-19 编辑：jiaochengji.com

本文介绍了js实现星级评分的方法，写个最简单的原生js的星级评分代码，有需要的朋友参考下。

本节脚本小编为大家分享一个最简单的原生js的星级评分代码。

1，html部分

复制代码代码示例:

<div id="rank" class="pingfen">  

    <ul>  

        <li></li>  

        <li></li>  

        <li></li>  

        <li></li>  

        <li></li>  

    </ul>  

    <p>加载中</p>  

</div>

2，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>

3，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>

4，完整例子，js星级评分代码。

复制代码代码示例:

<!DOCTYPE html>  

<html>  

<head>  

<meta charset="utf-8" />  

<title>星级评分--www.jiaochengji.com</title>  

<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>  

<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>  

</head>  

<body>  

    <div id="rank" class="pingfen">  

        <ul>  

            <li></li>  

            <li></li>  

            <li></li>  

            <li></li>  

            <li></li>  

        </ul>  

        <p>加载中</p>  

    </div>  

</body>  

</html>

您可能感兴趣的文章：
javascript星级评分效果示例
 基于jQuery的星级评分插件
 Jquery 星级评价功能(简单版)的实现代码
 js星级评分实例代码
 jQuery 星级评分插件 jQuery Raty
jQuery实现星级评分实例代码
 js 星级选择器的实现代码(适用于评论功能)
Jquery特效评分代码(星级评分)
很酷的javascript 星级评分效果
 jQuery PHP实现购物商城常用的星级评分效果

关键词： 星级评分 　

上一篇：JS字符串截取(substr与substring用法) 下一篇：js文件中文乱码怎么办？解决方法

[关闭]

js星级评分实例代码

最近更新

浏览排行