Javascript模仿淘宝信用评价实例(附源码)

下面我来详细讲解“Javascript模仿淘宝信用评价实例(附源码)”的完整攻略。

首先，该实例主要是通过Javascript实现了一个简单的淘宝信用评价功能。用户可以通过点击不同的星星来进行评分，然后根据评分的不同，会有不同的反馈信息和评价结果。该实例的源码已经公开，可以在Github上获取。

接下来，我们来看具体的实现过程。首先，我们需要为页面添加一些基本的HTML和CSS，以及一些Javascript代码。

HTML 部分：

<div class="rate">
  <div class="rate-stars">
    <a href="#" class="star-1" data-rate="1"></a>
    <a href="#" class="star-2" data-rate="2"></a>
    <<a href="#" class="star-3" data-rate="3"></a>
    <<a href="#" class="star-4" data-rate="4"></a>
    <<a href="#" class="star-5" data-rate="5"></a>
  </div>
  <div class="rate-feedback"></div>
</div>

CSS 部分：

.rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.rate-stars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.rate-stars a.star {
  display: inline-block;
  height: 22px;
  width: 22px;
  background: url('star.png');
  background-size: 44px 22px;
}

.rate-feedback {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

Javascript 部分：

var rateStars = document.querySelectorAll('.rate-stars a');

for (var i = 0; i < rateStars.length; i++) {
  rateStars[i].addEventListener('click', function() {
    var rateValue = this.getAttribute('data-rate');
    for (var j = 0; j < rateStars.length; j++) {
      var starValue = rateStars[j].getAttribute('data-rate');
      if (starValue <= rateValue) {
        rateStars[j].classList.add('active');
      } else {
        rateStars[j].classList.remove('active');
      }
    }
    showFeedback(rateValue);
  });
}

function showFeedback(rateValue) {
  var feedback = document.querySelector('.rate-feedback');
  var feedbackArray = [
    '非常不满意', '不满意', '一般', '满意', '非常满意'
  ];
  feedback.innerHTML = '您的评价是：' + feedbackArray[rateValue - 1];
}

在这个实例中，我们通过使用querySelectorAll方法来获取rate-stars下的所有星星，然后使用一个循环来遍历这些星星。当用户点击某一颗星星时，我们就通过getAttribute方法来获取星星的data-rate属性，然后根据这个数值，来决定哪些星星需要进行高亮，哪些需要取消。同时，我们也调用了一个函数showFeedback来展示用户对于商品的评价结果。

上面就是该实例的基本实现方法，我们还可以通过一些改进来使得该实例更加完善。例如，我们可以在showFeedback函数中添加输入框，让用户可以自己输入评价内容，或者我们也可以将评价结果保存到后台数据库中，以便后续的分析和使用。

示例说明1：

当用户点击某一颗星星时，我们通过getAttribute方法来获取星星的data-rate属性。

rateStars[i].addEventListener('click', function() {
  var rateValue = this.getAttribute('data-rate');
});

在这个示例中，我们为rateStars添加了一个点击监听事件，当用户点击某一颗星星时，会调用这个监听事件。其中，this表示被点击的星星，我们可以通过getAttribute方法来获取它的data-rate属性。

示例说明2：

我们通过一个feedbackArray数组来保存不同评分的反馈信息。

var feedbackArray = [
  '非常不满意', '不满意', '一般', '满意', '非常满意'
];

在这个示例中，我们使用了一个feedbackArray数组来保存用户级相应评分每个星级的对应反馈信息。就是说，当用户选择不同的星级评分时，我们可以根据这个数组来获取对应的反馈信息进行展示。