Добрый день! При запуске функции 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];
}
}