Tạo phần đánh giá 5 sao dựa theo lượt xem bài viết cho blogspot

Thủ thuật này yêu cầu phải kết hợp với bài viết thêm bộ đếm lượt xem bài viết cho blogspot
Bởi vì đánh giá này mình sẽ tạo ra dựa theo số lượng xem bài viết và tính theo công thức: (Lượt xem/số hàng chục gần nhất) + 4 để đảm bảo lúc nào rate cũng trên 4.00 và số lượng người đánh giá sẽ là Số người xem/3
Và xin nói thêm là cái này cũng là hàng "fake" nhé không phải rate thật tuy nhiên nhìn nó sẽ tự nhiên nhất bởi dựa theo số lượt người xem, số lượng xem càng nhiều thì hiển thị càng nhiều người đánh giá :D

Demo

Hướng dẫn

Sau khi áp dụng theo hướng dẫn thêm bộ đếm lượt xem bài viết cho blogspot thì các bạn thực hiện theo các bước bên dưới

HTML

Đặt đoạn code bên dưới vào nơi muốn hiển thị đánh giá

<div id="ratingDisplay">
  <div class="stars-outer">
    <div class="stars-inner"></div>
  </div>
  <span id="ratingValue"></span> / <span id="ratingCount"></span> rates
</div>

CSS

Sử dụng CSS sau để hiển thị giao diện cho phần đánh giá

.stars-outer {
  display: inline-block;
  position: relative;
  unicode-bidi: bidi-override;
  font-size: 1.25rem;
  color: #ccc;
}

.stars-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #ff7a18;
}

.stars-outer::before, .stars-inner::before {
  content: "\2605\2605\2605\2605\2605";
  font-family: "Arial", sans-serif;
}

JS

Cuối cùng để hoạt động được chúng ta sử dụng đoạn Javascript bên dưới

function calculateRating() {
    var viewsText = document.getElementById("postviews").textContent;
    var views = convertKViewsToNumber(viewsText);
    if (isNaN(views)) {
        setTimeout(calculateRating, 100);
        return;
    }

    var nearestTen = Math.ceil(views / 10) * 10;
    var rating = ((views / nearestTen) + 4).toFixed(2);

    if (rating === "5.00") {
        rating = (5.00 - getRandomArbitrary(0.01, 0.05)).toFixed(2);
    }

    var rates = Math.floor(views / 3);
    var displayRates = formatRates(rates);

    document.getElementById("ratingValue").textContent = rating;
    document.getElementById("ratingCount").textContent = displayRates;
    updateStars(parseFloat(rating));
}

function convertKViewsToNumber(viewsText) {
    var multiplier = 1;
    if(viewsText.toLowerCase().endsWith('k')) {
        multiplier = 1000;
        viewsText = viewsText.replace(/k/i, '');
    }
    return parseFloat(viewsText) * multiplier;
}

function updateStars(rating) {
    const starsTotal = 5;
    const starPercentage = (rating / starsTotal) * 100;
    document.querySelector('.stars-inner').style.width = starPercentage + '%';
}

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function formatRates(rates) {
    if (rates >= 1000) {
        return (rates / 1000).toFixed(1) + 'k';
    }
    return rates.toString();
}

calculateRating();

• rating = (5.00 - getRandomArbitrary(0.01, 0.05)).toFixed(2);: 0.01, 0.05 là giá trị để trừ random trong khoảng này nếu rate được tính ra là 5.00 nhìn cho tự nhiên
• var rates = Math.floor(views / 3);: Sửa 3 thành giá trị khác nếu muốn số lượng người nhận xét tăng hoặc giảm so với số lượt xem

/ rates

↑ quay lại xem hướng dẫn