评分

最新推荐文章于 2025-07-06 16:08:05 发布

转载最新推荐文章于 2025-07-06 16:08:05 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qidakang/p/4790353.html

自己用js代码写的简易评分，与大家一起分享

其中图片两张：一张灰色图片，一张黄色图片

<html>
<head>
<script>
var index=-1;
onload=function(){
	var imgs=document.getElementsByTagName('img');
	for(var i=0;i<imgs.length;i++){
		//当点击时，记录下来当前的索引
		imgs[i].onclick=function(){
			index=parseInt(this.id);
		};
		//鼠标指向某个星时的操作
		imgs[i].onmouseover=function(){
			var index1=parseInt(this.id);
			//将当前及前面的元素变成黄色
			for(var j=0;j<=index1;j++){
				imgs[j].src='images/star2.png';
			}
			//将后面的元素变成灰色
			for(var j=index1+1;j<5;j++){
				imgs[j].src='images/star1.png';
			}
		};
		//鼠标移开某个星时的操作
		imgs[i].onmouseout=function(){
			//让刚才点击的索引及之前的星变黄
			for(var j=0;j<=index;j++){
				imgs[j].src='images/star2.png';
			}
			//让刚才点击的索引之后的星变灰
			for(var j=index+1;j<5;j++){
				imgs[j].src='images/star1.png';
			}
		}
	}
};
</script>
</head>

<body>
<img id="0" src="images/star1.png"/>
<img id="1" src="images/star1.png"/>
<img id="2" src="images/star1.png"/>
<img id="3" src="images/star1.png"/>
<img id="4" src="images/star1.png"/>
</body>
</html>

转载于:https://www.cnblogs.com/qidakang/p/4790353.html