-慕课网

首页课程实战体系课手记专栏慕课教程

来源：7-3 编程练习

Frank337903

2014-10-20 11:46

稍微修改了一下，谁给完善下？有且仅有一颗心时，点击第一颗星时所有星星变黑。

写回答关注

1回答

Mr空: 2014-12-07 11:39:34

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
span {
    cursor: pointer;
}
</style>
    <script type="text/javascript">
        window.onload = function () {
            // 获取元素
            var stars = document.getElementById('stars').getElementsByTagName('span');
            var ret = document.getElementById('ret');
	//获得所有星星的数量
	function starNum(){
		var len=0;
		for(var i =0;i<stars.length;i++){
		 if( stars[i].style.color=="red"){
			 len = i+1;
			 }	
		}return len;
		}		
	//定义getStar函数
	function getStar(n){
	  for(var i=0;i<stars.length;i++){
		 if(i<=n-1){
		  stars[i].style.color="red";
		}
		else{
		  stars[i].style.color="";
		  }
		}
		ret.innerHTML=n;		
		
		
	}  
	// 每个星星节点的点击事件
	var num=ret.innerHTML;  //点击前的星星分数
	for(var i =0;i<stars.length;i++){
		stars[i].onclick=function(){
			var n = this.getAttribute("star");		
			getStar(n);
	  
			//如果有且仅有一颗心，并且点击星时，所有星变黑色
			if (num==1){		// 点击前的星星分数 == 1
				stars[0].style.color="";	
			    num = 0;
			} else {
				num = n;		// 更新
			}
		}
		stars[i].onmouseover=function(){
			var n = this.getAttribute("star");		
			getStar(n);  
		}
		stars[i].onmouseout=function(){
			getStar(num);
		}
	}        
  }
    </script>
    </head>
    <body>
<div id="stars"> 
	<span star="1">★</span> 
	<span star="2">★</span> 
	<span star="3">★</span> 
	<span star="4">★</span> 
	<span star="5">★</span> 
</div>
<div id="ret"></div>
</body>
</html>

0 1

人人网评论功能

仿人人网评论，让你的网页活跃起来，赶快来学习让功能的实现吧

27689 学习 · 155 问题

查看课程

相似问题

mark

回答 2

demo

回答 1

这是不是有权值问题？

回答 4

csdn评论功能

回答 1

源代码好像在火狐中有兼容性问题

回答 1

打开慕课网App查看更多内容