지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

자바스크립트는 타오바오 신용평가 예시(소스코드 포함)_자바스크립트 실력을 흉내낸다

WBOY
풀어 주다： 2016-05-16 15:29:33
원래의
1493명이 탐색했습니다.

본 글의 예시에서는 타오바오 신용평가를 모방한 자바스크립트 구현 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

사장님께서 어제 회의를 갖고 회사 쇼핑 플랫폼에 신용평가 기능을 추가하고, 사용자 경험은 타오바오를 참고하겠다고 하셨습니다.

그래서 오늘 몇 가지 조사를 하고 jQuery를 사용하여 비슷한 효과를 시뮬레이션했습니다.

코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>模仿淘宝的信用评价</title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  var rateMessage = {
   'rate-1': {
    'rate-1': '差得太离谱，与卖家描述的严重不符，非常不满',
    'rate-2': '部分有破损，与卖家描述的不符，不满意',
    'rate-3': '质量一般，没有卖家描述的那么好',
    'rate-4': '质量不错，与卖家描述的基本一致，还是挺满意的',
    'rate-5': '质量非常好，与卖家描述的完全一致，非常满意'
   },
   'rate-2': {
    'rate-1': '卖家态度很差，还骂人、说脏话，简直不把顾客当回事',
    'rate-2': '卖家有点不耐烦，承诺的服务也兑现不了',
    'rate-3': '卖家回复问题很慢，态度一般，谈不上沟通顺畅',
    'rate-4': '卖家服务挺好的，沟通挺顺畅的，总体满意',
    'rate-5': '卖家的服务太棒了，考虑非常周到，完全超出期望值'
   },
   'rate-3': {
    'rate-1': '再三提醒下，卖家才发货，耽误我的时间，包装也很马虎',
    'rate-2': '卖家发货有点慢的，催了几次终于发货了',
    'rate-3': '卖家发货速度一般，提醒后才发货的',
    'rate-4': '卖家发货挺及时的，运费收取很合理',
    'rate-5': '卖家发货速度非常快，包装非常仔细、严实'
   },
   'rate-4': {
    'rate-1': '物流公司态度非常差，送货慢，外包装有破损',
    'rate-2': '物流公司服务态度挺差，运送速度太慢',
    'rate-3': '物流公司服务态度一般，运送速度一般',
    'rate-4': '物流公司态度还好吧，送货速度挺快的',
    'rate-5': '物流公司服务态度很好，运送速度很快'
   }
  };
  $().ready(function () {
   var starInit = $("#starInit");
   var ulStars = $("#ulStars");
   var txtStar = $("#txtStar");
   var tip = $("#tip");
   var rate_1_result = $("#rate_1_result");
   var star_wrap = $("#star_wrap");
   starInit.hover(function () {
    starInit.hide();
    star_wrap.show();
   })
   var oLis = $("#ulStars li");
   oLis.each(function (i) {
    $(this).click(function () {
     var iStar = parseInt($(this).attr("star"), 10);
     txtStar.val(iStar);
     rate_1_result.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
    }).hover(function () {
     var iStar = parseInt($(this).attr("star"), 10);
     for (var i = 0; i < oLis.length; i++) {
      var _temp = oLis[i];
      if (_temp.attributes["star"].value <= iStar) {
       if (iStar >= 3) {
        _temp.className = "good";
       }
       else {
        _temp.className = "bad";
       }
      }
      else {
       _temp.className = "";
      }
     }
    }, function () {
     if (txtStar.val() != "") {
      var iSelectedStar = parseInt(txtStar.val(), 10);
      for (var i = 0; i < oLis.length; i++) {
       var _temp = oLis[i];
       if (_temp.attributes["star"].value > iSelectedStar) {
        _temp.className = "";
       }
       else {
        var iSelfStar = parseInt(_temp.attributes["star"].value, 10);
        if (iSelfStar >= 3) {
         _temp.className = "good";
        }
        else {
         if (iSelectedStar >= 3) {
          _temp.className = "good";
         }
         else {
          _temp.className = "bad";
         }
        }
       }
      }
     }
    }).mousemove(function (e) {
     var intX = 0, intY = 0;
     if (e == null) {
      e = window.event;
     }
     if (e.pageX || e.pageY) {
      intX = e.pageX; intY = e.pageY;
     }
     else if (e.clientX || e.clientY) {
      if (document.documentElement.scrollTop) {
       intX = e.clientX + document.documentElement.scrollLeft;
       intY = e.clientY + document.documentElement.scrollTop;
      }
      else {
       intX = e.clientX + document.body.scrollLeft;
       intY = e.clientY + document.body.scrollTop;
      }
     }
     var tipbar = tip.get(0);
     tipbar.style.top = (intY + 20) + "px";
     tipbar.style.left = (intX - 95) + "px";
     tipbar.style.display = "";
     var iStar = parseInt($(this).attr("star"), 10);
     tip.html("<span style='color:red'>" + iStar + " 分</span> - " + rateMessage["rate-1"]["rate-" + iStar]);
    }).mouseout(function () {
     tip.hide();
    })
   })
   star_wrap.hover(function () { }, function () {
    setTimeout(initStar, 50);
   })
   ulStars.hover(function () { }, function () { setTimeout(initStar, 50); });
   var initStar = function () {
    if (txtStar.val() == "") {
     star_wrap.hide();
     starInit.show();
     for (var i = 0; i < oLis.length; i++) {
      var _temp = oLis[i];
      _temp.className = "";
     }
    }
   }
  }) 
 </script>
 <style type="text/css">
  * { padding: 0; margin: 0; list-style: none; font-size: 12px; }
  #starBox { margin: 100px; }
  #starInit { width: 120px; height: 36px; overflow: hidden; float: left; }
  #star_wrap, #ulStars { width: 120px; height: 18px; overflow: hidden; float: left; }
  #ulStars li { width: 19px; height: 18px; background: url(bg.gif) no-repeat -278px -96px; float: left; margin-right: 5px; cursor: pointer; }
  #ulStars li.good { background: url(bg.gif) no-repeat -278px -52px; }
  #ulStars li.bad { background: url(bg.gif) no-repeat -278px -73px; }
  #tip { width: 171px; height: 67px; background: url(bg.gif) no-repeat -40px -167px; padding: 15px 3px 0 5px; line-height: 18px; }
  #txtStar { position: absolute; left: 0; top: -30px; }
  #rate_1_result { float: left; line-height: 25px; text-indent: 15px; color: Red; }
 </style>
</head>
<body>
 <div id="starBox">
  <div id="starInit">
   <img src="star_init.gif" alt="자바스크립트는 타오바오 신용평가 예시(소스코드 포함)_자바스크립트 실력을 흉내낸다" />
  </div>
  <div id="star_wrap" style="display: none">
   <ul id="ulStars">
    <li star="1"></li>
    <li star="2"></li>
    <li star="3"></li>
    <li star="4"></li>
    <li star="5"></li>
   </ul>
  </div>
  <div id="rate_1_result">←点击星星就能评价了</div>
  <input type="text" id="txtStar" style="width: 30px" value="" />
  <div id="tip" style="position: absolute; display: none"></div>
 </div>
</body>
</html>
로그인 후 복사

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

관련 라벨：
javascript
원천：php.cn
이전 기사：Jquery는 휴대폰 번호가 규칙을 준수하는지 확인하고 휴대폰 번호 감지 결과에 따라 제출 버튼을 다른 상태로 설정합니다_jquery 다음 기사：javascript_javascript 기술에서 스팬 태그에 값을 할당하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿