写个最简单的原生js的星级评分：
<div id="rank" class="pingfen"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <p>加载中</p> </div>
<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>
ok超级简单不信你试试。
因评论说不能使用，让给发个完整的代码，其实上面的代码就完整只是给拆分了而已。
下面是没有拆分的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>星级评分</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实现星星评分系统是一种常见的用户界面交互设计，它允许用户通过点击星星来给予某个对象（如商品、服务或内容）评分。这种设计通常用于电商网站、电影评分平台等，提供直观、易于理解的反馈机制。在不...
这样，我们就构建了一个简单的原生JavaScript星级评分系统，它不仅易于理解，而且可以根据需求进行扩展。无论是在网站还是应用程序中，这样的评分系统都能提供直观且友好的用户体验。通过不断优化和调整，我们可以使...
接下来，我们使用JavaScript（这里可以使用jQuery或者其他库，但也可以纯JavaScript实现）来监听选择框的改变事件，当用户选择一个新的评分时，更新星星的样式。例如： ```javascript document.getElementById('...
这个过程涉及了HTML、CSS和JavaScript的综合运用，展示了原生JS在实现动态交互效果上的灵活性和实用性。在实际开发中，你可以根据项目需求进行定制和优化，确保用户能够方便、直观地给出他们的评价。
在给定的资源中，“asp 简单易用的星星评分/评级 有注释”是一个利用ASP技术实现的星星评分系统，适用于产品评价或服务质量评估，类似于淘宝等电商平台上的用户反馈机制。 该系统的核心功能是让用户通过选择星星的...
【标题】: "很酷的星级评分系统原生JS实现" 【描述】: 这篇文章主要探讨了如何使用原生JavaScript实现一个具有自定义功能的星级评分系统，包括设置星星数量和显示信息。作者通过实践这个实例，提升了对各种编程知识...
今天我又写了个很酷的实例：星级评分系统（可自定义星星个数、显示信息） sufuStar.star(); 使用默认值5个星星，默认信息 var msg = [……..]; sufuStar.star(10,msg); 自定义星星个数为10、显示信息msg格式参考...
在本文中，我们将深入探讨如何使用原生JavaScript和CSS实现一个五星评分系统。这个系统简单易用，非常适合初学者或希望快速实现此功能的开发者。我们将会解析提供的`test.html`文件中的代码，并理解其中的关键知识点...
在网页设计和前端开发中，星级评分系统是一个非常实用且常见的功能，它允许用户通过点击星星来给出评分，这种交互模式在电商网站、评论系统、社区论坛等地方广泛使用。下面将详细介绍使用JavaScript实现一个带有提示...
首先，"兼容ie低版本的星星评分"意味着这款插件采用了能够让旧版IE浏览器识别和执行的技术，可能是通过JavaScript或者CSS。IE6到IE8并不支持现代Web技术如HTML5和CSS3，因此，插件开发者可能使用了传统的DOM操作、...
总的来说，“jq、js原生五星评价特效”项目涉及到JavaScript和jQuery的基础知识，包括事件处理、DOM操作、CSS样式控制以及本地存储。通过这个项目，开发者可以深化对这些技术的理解，并提升实际开发能力。在实践中，...
在本文中，我们将详细解析如何使用JavaScript来实现一个简单的星星评分系统，包括响应鼠标事件、遍历页面元素以及修改元素样式属性等知识点。 首先，星星评分功能的实现依赖于JavaScript处理鼠标事件的能力。鼠标...
【标题】"五星评价js原生代码"涉及的是JavaScript编程中的一个常见应用场景，即实现用户对产品或服务进行五星级评价的功能。这个功能通常在电商网站、应用内评分或者反馈系统中广泛使用，允许用户通过点击星形图标来...
在星级评分插件中，CSS将决定星星的样式、颜色、大小、鼠标悬停时的改变以及其他视觉效果。通过使用CSS3，我们可以实现平滑的过渡效果和自定义的伪类，使得用户在选择星星时有更直观的反馈。 JavaScript作为客户端...
7. **自定义属性**：SVG支持自定义属性，可以用来存储额外的信息，如星星的初始评分、可选的最大评分等，这些信息在JavaScript中可以轻松访问。 8. **事件委托**：为了提高性能和代码可维护性，开发者可能会使用...
标题中的“自己写的用于评分的星星”表明这是一个关于自定义评分控件的开发案例。在IT行业中，特别是在软件开发领域，经常会遇到需求定制的情况，这里的描述提到作者是新手，但为了解决项目中评分功能的需求，他/她...
前面有一篇原生js实现星级评分 。可能覆盖面不是很广，现在给出一个jquery实现的星级评分。 代码如下: ”star”> <span>jQuery星级评论打分 <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> ...
"五星评分效果实例"是一个关于如何使用原生JavaScript实现动态星星打分功能的示例。这种功能允许用户通过鼠标滑动或点击星星来给出他们对产品或服务的满意度评价，通常以一到五星的形式展示。 首先，我们要理解...