Question

所以我有一个基于星星的评论系统，星星在宽度上工作，有5颗星，所以要填充1颗星你必须给各个元素20％的宽度。如何创建一个允许您添加星星的onclick系统。我用这个系统作为明星。

＆＃13;

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}

@-moz-document url-prefix() {
  .full-stars {
    color: #ECBE24;
  }
}

<!--[if IE]>.full-stars {
  color: #ECBE24;
}

<![endif]-->

＆＃13;

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:70%"></div>
</div>

＆＃13;

Answer 1

您可以使用元素上的click的offsetX，并将其与rating元素的宽度进行比较，以获得近似的百分比值，并使用它来更新样式。

样品：

SELECT *
FROM
(
    SELECT *, DENSE_RANK() OVER (ORDER BY col_name DESC) dr
    FROM yourTable
    WHERE Boolean = 'False' AND Remark = 'Outstock'
) t
WHERE dr <= 3;

var ratings = document.getElementsByClassName('ratings')[0];
var width = ratings.getBoundingClientRect().width;
ratings.addEventListener('click', function(e) {
  var deltaX = e.offsetX;
  var newRating = (deltaX / width) * 100;
  ratings.children[1].style.width = newRating + '%';

})

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}


/* Webkit-text-stroke is not supported on firefox or IE */


/* Firefox */

@-moz-document url-prefix() {
  .full-stars {
    color: #ECBE24;
  }
}


/* IE */

<!--[if IE]>.full-stars {
  color: #ECBE24;
}

<![endif]-->

您还可以将其标准化锁定为固定值，例如只允许满星和半星

<div class="ratings">
  <div class="empty-stars"></div>
  <div class="full-stars" style="width:90%"></div>
</div>

var ratings = document.getElementsByClassName('ratings')[0];
var width = ratings.getBoundingClientRect().width;
ratings.addEventListener('click', function(e){
	var deltaX = e.offsetX;
  var newRating = (deltaX/width) * 5;
  newRating = (Math.round(newRating * 2) / 2).toFixed(2) * 20;
  ratings.children[1].style.width = newRating + '%';
})

.ratings {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #b1b1b1;
  overflow: hidden;
}

.full-stars {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #fde16d;
}

.empty-stars:before,
.full-stars:before {
  content: "\2605\2605\2605\2605\2605";
  font-size: 14pt;
}

.empty-stars:before {
  -webkit-text-stroke: 1px #848484;
}

.full-stars:before {
  -webkit-text-stroke: 1px orange;
}


/* Webkit-text-stroke is not supported on firefox or IE */


/* Firefox */

@-moz-document url-prefix() {
  .full-stars {
    color: #ECBE24;
  }
}


/* IE */

<!--[if IE]>.full-stars {
  color: #ECBE24;
}

<![endif]-->

点击查看带有星标的系统

1 个答案: