JS 평가 별 기능 구현

3511 단어 js평가 의 별
별 평 가 를 처음 접 했 을 때,와!머리 가 방금 당나귀 에 게 차 였 나 봐 요.가장 멍청 한 방법 이 생각 났 어 요.-손 으로 오각별 을 그 려 요.어 머!css 양식 은 모두 한 줄 크게 썼 고,우쭐 거 리 며 마침내 그 려 냈 다.그리고 옆 에 있 는 여동생 이 어떻게 썼 는 지 보 자.우 와!그 는 기지 가 넘친다!그냥 기호★로 해결!!!아,아 이 큐 가 급 해!
먼저 그림 을 올 려 보 세 요.

간단 하지만 몇 가지 주의 할 점 이 있 습 니 다.
1.클릭 하지 않 은 hover 효과 로 별 이 마우스 로 움 직 여 밝 아 집 니 다.
2.클릭 후 hover 효과 종료.
3.같은 별 을 클릭 하면 별 이 수시로 색 을 바 꿀 수 있다.
구체 적 인 코드 전시:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  </head>
  <style type="text/css">
    .stars{
      white-space: nowrap;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .stars li{
      display: inline-block;
      color: #ADADAD;
      font-size: 40px;
    }
  </style>
  <body>
    <ul class="stars">
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
      <li>★</li>
    </ul>
    <script src="../../js/common/jquery-git.js"></script>
    <script>
    $(function() {
        //     hover  
        var isClicked = false;
        var beforeClickedIndex = -1;
        var clickNum = 0; //        
        $('li').hover(
          function() {
            if(!isClicked) {
              $(this).css('color', '#F0AD4E');
              var index = $(this).index();
              for(var i = 0; i <= index; i++) {
                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
              }
            }
          },
          function() {
            if(!isClicked) {
              $('li').css('color', '#ADADAD');
            }
          }
        );
        //      
        $('li').click(function() {
          $('li').css('color', '#ADADAD');
          isClicked = true;
          var index = $(this).index();
          for(var i = 1; i <= index+1; i++) {
            $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
          }
          if(index == beforeClickedIndex) { //                 
            clickNum++;
            if(clickNum % 2 == 1) {
              $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
            } else {
              $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
            }
          } else {
            clickNum = 0;
            beforeClickedIndex = index;
          }
        });
      });
    </script>
  </body>
</html>
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 평가 의 별 기능 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다!
상세 설명 Vue 위 챗 공중 번호 개발 구덩이 밟 기 전 기록
Vue 여러 지역 선택 구성 요소 작성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage