首页 > 编程语言> > JavaScript_星级评分效果

JavaScript_星级评分效果

2021-02-02 19:32:47 作者：互联网

文章目录

需求分析：

鼠标移入哪个星星，哪个星星及其前面的星星都高亮
同时显示相应文字
鼠标点击哪个星星，哪个星星及其前面的星星都高亮
鼠标移出 ul ，上次点击的星星及其前面的星星都高亮
鼠标移出 ul ，如果没有点击过，则所有星星都暗

效果图：

在这里插入图片描述

源代码：

HTML部分

<!-- 
ul 里面设置5个 li 
li 用来放置星星
div 用来放置显示的文字
-->
<ul id="ul1" >
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
<li class="default"> </li>
</ul>
<div id="div"></div>

CSS部分

<style type="text/css">
#ul1{
	padding:0; 
	margin:0; 
	list-style:none;  
	width:300px; 
	height:28px;
}
#ul1 li{
    float:left; 
    /* 背景设置成未被点亮的星星 */
    background:url(star.gif) no-repeat 0 0; 
    width:27px; 
    height:28px; 
}
</style>

JavaScript部分

<script>
	var index = -1;	//被点击的星星的索引，初始化为-1
	var textArr = ['迟早得凉','较差','一般','推荐','强烈推荐'];	//星星的文字说明
	//获取相关元素
	var ul = document.getElementById('ul1');	//容器
	var textDiv = document.getElementById('div');	//显示文字的div
	var liArr = ul.children;	//所有星星li的集合
	for(var i=0; i<liArr.length; i++){
		liArr[i].num = i;	//存储当前索引值
		liArr[i].onmouseenter = function(){
			//1 鼠标移入哪个星星，哪个星星及其前面的星星都高亮
			light(this.num);
		}
		liArr[i].onlick = function(){
			//3 鼠标点击哪个星星，哪个星星及其前面的星星都高亮
			index = this.num;
			light(this.num);
		}
	}
	// 4 鼠标移出ul，上次点击的星星及其前面的星星都高亮
	ul.onmouseleave = function(){
		light(index);
	}
	// 封装一个方法: 
    // 参数：索引
    // 作用: 索引及其前面的星星都高亮
    function light(index){
		//先把所有星星都熄灭
		for(var i=0; i<liArr.length; i++){
			liArr[i].style.backgroundPosition =  "0 0";	//精灵图中不亮的星星坐标
		}
		for(var i=0; i<=index; i++){
			liArr[i].style.backgroundPosition = "0 -28px";	//精灵图中高亮的星星坐标
		}
		// 并显示相应文字
		if(index<0){
			textDiv.innerHTML = '';
		}else{
			textDiv.innerHTML = textArr[index];
		}
	}
</script>

总代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>五星评分</title>
<style type="text/css">
#ul1{
	padding:0; 
	margin:0; 
	list-style:none;  
	width:300px; 
	height:28px;
}
#ul1 li{
    float:left; 
    /* 背景设置成未被点亮的星星 */
    background:url(star.gif) no-repeat 0 0; 
    width:27px; 
    height:28px; 
}
</style>

</head>

<body>
<!-- 
ul 里面设置5个 li 
li 用来放置星星
div 用来放置显示的文字
-->
<ul id="ul1" >
    <li class="default"> </li>
    <li class="default"> </li>
    <li class="default"> </li>
    <li class="default"> </li>
    <li class="default"> </li>
    </ul>
    <div id="div"></div>
<script>
	var index = -1;	//被点击的星星的索引，初始化为-1
	var textArr = ['迟早得凉','较差','一般','推荐','强烈推荐'];	//星星的文字说明
	//获取相关元素
	var ul = document.getElementById('ul1');	//容器
	var textDiv = document.getElementById('div');	//显示文字的div
	var liArr = ul.children;	//所有星星li的集合
	for(var i=0; i<liArr.length; i++){
		liArr[i].num = i;	//存储当前索引值
		liArr[i].onmouseenter = function(){
			//1 鼠标移入哪个星星，哪个星星及其前面的星星都高亮
			light(this.num);
		}
		liArr[i].onlick = function(){
			//3 鼠标点击哪个星星，哪个星星及其前面的星星都高亮
			index = this.num;
			light(this.num);
		}
	}
	// 4 鼠标移出ul，上次点击的星星及其前面的星星都高亮
	ul.onmouseleave = function(){
		light(index);
	}
	// 封装一个方法: 
    // 参数：索引
    // 作用: 索引及其前面的星星都高亮
    function light(index){
		//先把所有星星都熄灭
		for(var i=0; i<liArr.length; i++){
			liArr[i].style.backgroundPosition =  "0 0";	//精灵图中不亮的星星坐标
		}
		for(var i=0; i<=index; i++){
			liArr[i].style.backgroundPosition = "0 -28px";	//精灵图中高亮的星星坐标
		}
		// 并显示相应文字
		if(index<0){
			textDiv.innerHTML = '';
		}else{
			textDiv.innerHTML = textArr[index];
		}
	}
</script>
</body>
</html>

所用图片：

在这里插入图片描述

由于你们没有图片，直接复制代码，展示不出效果，大家可以自己找几张图片来代替，稍微修改下即可，只要能看得懂代码，修改起来莫得问题啦

标签：星星,index,高亮,ul,评分,JavaScript,var,liArr,星级
来源： https://blog.csdn.net/qq_45677671/article/details/113568541