写个最简单的原生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在实现动态交互效果上的灵活性和实用性。在实际开发中，你可以根据项目需求进行定制和优化，确保用户能够方便、直观地给出他们的评价。
原生js滑动星星打分_淘宝星星打分_动态星星评分.rar
在给定的资源中，“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> ...