案例 ---点亮星星

   步骤一：实现鼠标移入 左边的星星点亮 右边的星星熄灭 文字发生改变 
 

   步骤二：实现鼠标移出 星星熄灭 文字发生改变 
 

   步骤三：实现点击后 左边星星点亮 右边星星熄灭 文字发生改变 
 

   移出鼠标 还是左边星星点亮 右边星星熄灭 
 

   分析步骤可知 点击效果和移入效果一样，这样点击效果不用写，只写移入效果 只是点击鼠标后移出鼠标后保存了状态即移出事件和移入事件一样只是取的值不同 分为点击和移入状态 
 

   1 难点 如何让文字随着星星一起改变 
 

   用数组把文字存起来 
 

   2 难点 如何保存点击后的状态 
 

   设置初始值 点击后改变初始值 而移进鼠标函数用的是另一个实参 
 

 
  <body> 
 

 
  <div  
  id= 
  "wrap" 
  > 
 

 
   <h2> 
  星级评分 
  </h2> 
 

 
   <ul> 
 

 
   <li></li> 
 

 
   <li></li> 
 

 
   <li></li> 
 

 
   <li></li> 
 

 
   <li></li> 
 

 
   </ul> 
 

 
   <p> 
  提示：请认真的给当前文章打分！ 
  </p> 
 

 
  </div> 
 

 
  </body> 
 

 
  <script> 
 

 
    
  var  
  oLis = document. 
  getElementsByTagName 
  ( 
  "li" 
  ) 
  , 
 

 
    
  oP =document. 
  getElementsByTagName 
  ( 
  "p" 
  )[ 
  0 
  ] 
  , 
 

 
    
  oUl = document. 
  getElementsByTagName 
  ( 
  "ul" 
  )[ 
  0 
  ] 
  , 
 

 
  score = - 
  1 
  ;

 
  length = oLis.length 
  ;

 
    
  arr  
  = [ 
  "提示：请认真的给当前文章打分！" 
  , 
  "很差" 
  , 
  "较差" 
  , 
  "还行" 
  , 
  "推荐" 
  , 
  "力荐" 
  ] 
  ; 
 

 
    
  for  
  ( 
  var  
  i= 
  0 
  ; 
  i<oLis.length 
  ; 
  i++){ 
 

 
   oLis[i]. 
  index  
  = i 
  ; 
 

 
  oLis[i].onmouseenter =  
  function  
  () {

 
    
  var  
  index=  
  this 
  . 
  index 
  ; 
 

 
  star 
  (index) 
  ;

}

 
   oLis[i].onclick =  
  function 
  (){ 
 

 
   score = 
  this 
  . 
  index 
  ; 
 

}

 
   oUl. 
  onmouseleave  
  =  
  function  
  () { 
 

 
  star 
  (score) 
  ;

}

}

 
  function  
  star 
  (index) {

 
    
  for  
  ( 
  var  
  j= 
  0 
  ; 
  j<=index 
  ; 
  j++){ 
 

 
   oLis[j].className =  
  "on" 
  ; 
 

}

 
    
  for  
  ( 
  var  
  i =index+ 
  1 
  ; 
  i< 
  length 
  ; 
  i++){ 
 

 
   oLis[i].className=  
  "" 
  ; 
 

}

 
   oP. 
  innerHTML  
  =  
  arr 
  [index+ 
  1 
  ] 
  ; 
 

}

 
  </script> 
 

猜你喜欢