स्टार रेटिंग

628 ledoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

30 April 2024

एनिमेटेड सितारे रेटिंग टेम्पलेट

23 November 2024

स्टार ट्रेल्स एनिमेशन

19 March 2025

शुद्ध CSS3 स्टार वार्स लाइटसेबर चेकबॉक्स

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>5 star rating</title>
<style>
  .star {
    font-size: 24px;
    color: grey;
    cursor: pointer;
  }
  .checked {
    color: gold;
  }
  .vote-count {
    margin-left: 10px;
  }
</style>
</head>
<body>
<div id="post1">
  <div id="rating1" class="rating">
    <span class="star" data-value="1">★</span>
    <span class="star" data-value="2">★</span>
    <span class="star" data-value="3">★</span>
    <span class="star" data-value="4">★</span>
    <span class="star" data-value="5">★</span>
    <span class="vote-count" id="voteCount1">Votes: 0</span>
  </div>
</div>

function updateVoteCount() {
      voteCountElement.textContent = `Votes: ${voteCount}`;
    }

stars.forEach(star => {
      star.addEventListener('click', () => {
        const rating = star.getAttribute('data-value');
        currentRating = rating;
        voteCount++;
        localStorage.setItem(ratingKey, currentRating);
        localStorage.setItem(voteCountKey, voteCount);
        updateStars(currentRating);
        updateVoteCount();
        alert(`Vous avez évalué ceci avec ${rating} étoile(s).`);
      });
    });

updateStars(currentRating);
    updateVoteCount();
  });
</script>
</body>
</html>

अनुशंसित

एनिमेटेड सितारे रेटिंग टेम्पलेट

स्टार ट्रेल्स एनिमेशन

शुद्ध CSS3 स्टार वार्स लाइटसेबर चेकबॉक्स

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS