HTML5 星级评分系统 - 创建简单易用的用户评价功能 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 星级评分系统</title>
    <style>
        .stars {
            display: inline-block;
            font-size: 20px;
            cursor: pointer;
        }
        .star {
            color: grey;
        }
        .star:hover {
            color: orange;
        }
        .star.checked {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>星级评分</h1>
    <p>请对我们的产品进行评价：</p>
    <div class="stars">
        <span class="star" onclick="rate(1)">&#9734;</span>
        <span class="star" onclick="rate(2)">&#9734;</span>
        <span class="star" onclick="rate(3)">&#9734;</span>
        <span class="star" onclick="rate(4)">&#9734;</span>
        <span class="star" onclick="rate(5)">&#9734;</span>
    </div>
    <p id="rating"></p>
<pre><code>&lt;script&gt;
    function rate(stars) {
        var starElements = document.getElementsByClassName(&quot;star&quot;);
        for (var i = 0; i &lt; starElements.length; i++) {
            if (i &lt; stars) {
                starElements[i].classList.add(&quot;checked&quot;);
            } else {
                starElements[i].classList.remove(&quot;checked&quot;);
            }
        }
        document.getElementById(&quot;rating&quot;).innerHTML = &quot;您给出了 ' + stars + ' 颗星的评价。&quot;;
    }
&lt;/script&gt;
</code></pre>
</body>
</html>