使用HTML CSS和JavaScript实现星级评分

本文将演示如何使用JavaScript创建一个星级评分项目。星级评分是一种评价内容质量或性能的方式，展示不同领域中的质量或性能。完成后，它将如下所示：

先决条件

方法

使用HTML实体、div和span创建基本结构，同时使用相应的类名。使用CSS样式属性为相应的类设置样式，如显示、颜色、字体大小、边距、填充和边框。
使用JavaScript通过document.getElementByClassName获取span元素的列表和getElementById来访问HTML元素。
使用onclick属性作为事件监听器，根据点击的星级调用函数。
调用remove方法来移除已应用的CSS样式。
更新星级和输出与作者操作对应的颜色。

示例： 在此示例中，我们将使用上述方法创建星级评分。

HTML

<!-- index.html -->
  
<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <title>Star Rating</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" 
          href="styles.css" /> 
</head> 
  
<body> 
    <div class="card"> 
        <h1>JavaScript Star Rating</h1> 
        <br /> 
        <span onclick="gfg(1)" 
              class="star">★ 
        </span> 
        <span onclick="gfg(2)" 
              class="star">★ 
        </span> 
        <span onclick="gfg(3)" 
              class="star">★ 
        </span> 
        <span onclick="gfg(4)" 
              class="star">★ 
        </span> 
        <span onclick="gfg(5)" 
              class="star">★ 
        </span> 
        <h3 id="output"> 
              Rating is: 0/5 
          </h3> 
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    min-height: 50vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(137, 46%, 24%); 
    font-family: "Poppins", sans-serif; 
} 
  
.card { 
    max-width: 33rem; 
    background: #fff; 
    margin: 0 1rem; 
    padding: 1rem; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    width: 100%; 
    border-radius: 0.5rem; 
} 
  
.star { 
    font-size: 10vh; 
} 
  
.one { 
    color: rgb(255, 0, 0); 
} 
  
.two { 
    color: rgb(255, 106, 0); 
} 
  
.three { 
    color: rgb(251, 255, 120); 
} 
  
.four { 
    color: rgb(255, 255, 0); 
} 
  
.five { 
    color: rgb(24, 159, 14); 
}

Javascript

// script.js 
  
// To access the stars 
let stars =  
    document.getElementsByClassName("star"); 
let output =  
    document.getElementById("output"); 
  
// Funtion to update rating 
function gfg(n) { 
    remove(); 
    for (let i = 0; i < n; i++) { 
        if (n == 1) cls = "one"; 
        else if (n == 2) cls = "two"; 
        else if (n == 3) cls = "three"; 
        else if (n == 4) cls = "four"; 
        else if (n == 5) cls = "five"; 
        stars[i].className = "star " + cls; 
    } 
    output.innerText = "Rating is: " + n + "/5"; 
} 
  
// To remove the pre-applied styling 
function remove() { 
    let i = 0; 
    while (i < 5) { 
        stars[i].className = "star"; 
        i++; 
    } 
}