评分

自己用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>

  

posted @ 2015-09-07 23:55  DreamGiant  阅读(330)  评论(0编辑  收藏  举报