星级评价

最新推荐文章于 2026-04-17 04:57:19 发布

原创最新推荐文章于 2026-04-17 04:57:19 发布 · 426 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#星级评价 #动态效果

javaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现动态背景星星评分的方法。通过改变背景图片的位置，可以轻松地更新星星的样式，同时利用事件监听来响应用户的交互。代码示例详细展示了如何设置li元素的样式和事件处理，以创建一个互动的星星评分系统。

我用的是背景图片的星星，通过改变背景定位的位置，改变星星的样式
html结构代码：

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

css样式代码：

<style type="text/css">
		body,ul,li{
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
			float: left;
			width: 27px;
			height: 28px;
			background: url(img/star.gif) no-repeat 0 0;
		}
		</style>

js的实现代码：

<script type="text/javascript">
		var aLi = document.getElementsByTagName('li');
		var flag = false;
		var index = 0; //表示点击了哪个星星
		
		//给每个星星鼠标进入和离开事件
		for(let i = 0; i < aLi.length; i++){
			aLi[i].onmouseover = function(){
			//让所有的回到原始状态
				for(var j = 0; j < aLi.length; j++){
					//用的是背景图，改变定位信息即可
					aLi[j].style.backgroundPosition = "0 0";
				}
				//让鼠标之前的点亮
				for(var j = 0; j <= i; j++){
					aLi[j].style.backgroundPosition = "0 -28px";
				}
			}
			aLi[i].onmouseout = function(){
				for(var j = 0; j < aLi.length; j++){
					aLi[j].style.backgroundPosition = "0 0";
				}
				//判断是否被点击
				if(flag){
					for(var j = 0; j <= index; j++){
						aLi[j].style.backgroundPosition = "0 -28px";
					}
				}
				
//添加点击事件
			aLi[i].onclick = function(){
				flag = true; 
				index = i;  //保存点击的索引值
			}
		}
		</script>