在Web开发中，我们经常需要为用户提供对某个产品或服务的评价和打分功能。其中，星级评分是一种直观、简单且易于使用的方式。本文将介绍如何使用JavaScript实现星级评分功能。
准备工作
在开始编写代码之前，我们需要先准备好HTML和CSS文件。以下是一个基本的星级评分HTML结构示例：
<div class="rating"> <input type="radio" name="rating" value="1" id="rating-1"><label for="rating-1"></label> <input type="radio" name="rating" value="2" id="rating-2"><label for="rating-2"></label> <input type="radio" name="rating" value="3" id="rating-3"><label for="rating-3"></label> <input type="radio" name="rating" value="4" id="rating-4"><label for="rating-4"></label> <input type="radio" name="rating" value="5" id="rating-5"><label for="rating-5"></label> </div>
以上代码中，我们使用了<input>和<label>标签来创建五个单选框按钮，并使用相邻的<label>元素来承载星星图标样式。
接下来，我们需要为这些标签添加CSS样式，使其呈现出星级评分效果：
-- -------------------- ---- ------- ------- - -------- ------------- - ------- ------------------- - -------- ----- - ------- ----- - ------- -------- ------ ----- ------- ----- ------------- ---- ----------------- ---------------------- ---------------- ------ - ------- --------------------------- - ----- - ----------------- ----------------------- -
以上代码中，我们为<label>标签添加了背景图片，并根据用户选中的单选框按钮动态修改背景图片。
现在，我们已经准备好了HTML和CSS文件，接下来就可以开始编写JavaScript代码实现星级评分功能了。
实现步骤
- 获取所有单选框元素和它们相邻的
<label>元素。 - 使用
addEventListener()方法为每个单选框元素添加click事件监听器。 - 在事件处理程序函数中，获取当前被选中的单选框元素的值。
- 根据被选中的单选框元素的值，将前面的所有
<label>元素设置为填充状态，而后面的所有<label>元素设置为空状态。
以下是完整的JavaScript代码：
-- -------------------- ---- -------
----- ------------ - ---------------------------------- ----------------------
----- ------------ - ---------------------------------- --------
-------- ------------------------- -
----- ----------- - -------------------
--- ---- - - -- - - -------------------- ---- -
-- -- - ------------ -
----------------------------------------
- ---- -
-------------------------------------------
-
-
-
--- ---- - - -- - - -------------------- ---- -
----------------------------------------- --------------------
-示例代码
为了更好地演示星级评分功能，以下是完整的HTML、CSS和JavaScript代码。
-- -------------------- ---- -------
--------- -----
------
------
----------- ------ ------------
-------
------- -
-------- -------------
-
------- ------------------- -
-------- -----
-
------- ----- -
------- --------
------ -----
------- -----
------------- ----
----------------- ----------------------
---------------- ------
-
------- ------------ -
----------------- -----------------------
-
--------
-------
------
---- ---------------
------ ------------ ------------- --------- ---------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------