Показать сообщение отдельно
  #1 (permalink)  
Старый 15.03.2015, 14:45
Новичок на форуме
Отправить личное сообщение для Junior Посмотреть профиль Найти все сообщения от Junior
 
Регистрация: 07.03.2015
Сообщений: 9

Рейтинг для оценки сайта
Добрый день! При запуске функции fixedColor(), функции сhangeColor() и clearColor(), работают некорректно, так как одновременно пересекаются с функцией fixedColor(), которая вызывается через каждые 19 мс. Кто может дать какой - нибудь совет. Спасибо!

Код:

<!doctype html>

<html>
 <head>
  <title>Рейтинг</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css">
   #stars {
            border: 0px solid black;
		    margin: 50px 50px;
		    padding: 50px;
           }
      img  {
            float: left;
           }
		p  {
		    margin: 0px;
			padding: 10px;
			font-weight: bold;
			font-size: 16pt;
			overflow: hidden;
		   }
  </style>
  <script src="score.js" type="text/javascript">
  </script>
 </head>
 <body>
  
  <div id="stars">
    <img src="whitestar.png" width="50" height="50" class="st" id="star0">
	<img src="whitestar.png" width="50" height="50" class="st" id="star1">
	<img src="whitestar.png" width="50" height="50" class="st" id="star2">
	<img src="whitestar.png" width="50" height="50" class="st" id="star3">
	<img src="whitestar.png" width="50" height="50" class="st" id="star4">
	<p id="score"></p>
  </div>
  
 </body>
</html>


var st;
var para;
var event;
var objectOver;
var objectOut;
var objectClick;
var setColor=false;
var i;
var time;
var raiting=[];
var index;


onload=function(){
	
	para=document.getElementById("score");
	
	raiting=["Very bad","Bad","Ok","Good","Very good"];
	
	st=document.getElementsByClassName("st");
	for (i=0;i<st.length;i++){
		
		st[i].addEventListener("click", startTimeClick);
		st[i].addEventListener("mouseover", startTimeOver);
		st[i].addEventListener("mouseout", startTimeOut);
	}
}
    
	function startTimeClick(event){
		
		time=setInterval(fixedColor,19);
		objectClick=event.target;
		index=parseInt(objectClick.getAttribute("id").slice(4));
		//alert(index);
	}
	
	function startTimeOver(event){
		
		setTimeout(changeColor,20);
		objectOver=event.target;
	}
	
	function startTimeOut(event){
		
		objectOut=event.target;
		setTimeout(clearColor,20);
	}
	
	function fixedColor(){
		
		setColor=true;
		
		saveColor();
	}

function changeColor(){
	
		for(i=0;i<st.length;i++){
			
		if(st[i].getAttribute("id")!=objectOver.getAttribute("id")){
				
		    st[i].setAttribute("src","orangestar.png");
		}
			
		else{
			objectOver.setAttribute("src","orangestar.png");
			para.innerHTML=raiting[i];
			break;
		}
	}
	
    if(setColor==true){
		
		//clearInterval(time);
		//setColor=false;
		//do{
			
			saveColor();
		//}
		//while(setColor!=true);
		
	}
}
   
	
function clearColor(){
	
	for(i=st.length-1;i!=-1;i--){
			
		 if(st[i].getAttribute("id")!=objectOut.getAttribute("id")){
				
		    st[i].setAttribute("src","whitestar.png");
		}
			
		else{
			objectOut.setAttribute("src","whitestar.png");
			para.innerHTML=raiting[i];
			break;
		}
		
	}   
	
	for(i=0;i<st.length;i++){
		
		st[i].setAttribute("src","whitestar.png");
		para.innerHTML="";
	}
	
	//if(setColor==true){
		
		//saveColor();
	//}
	
	
}
	
	function saveColor(){
		
		//clearInterval(time);
		for(i=0;i<=index;i++){
			
			st[i].setAttribute("src","orangestar.png");
			para.innerHTML=raiting[i];
		}
    
    }
Ответить с цитированием