javascript实现点击星星小游戏

实现点击星星小游戏是一项非常有趣的javascript编程任务，下面是一份简单的攻略。

步骤

1. 在HTML页面中创建一个用于放置星星的容器div，并用CSS样式设置其宽度和高度。

<div id="star-container" style="width: 400px; height: 50px;"></div>

1. 在JavaScript中创建一组包含星星元素的数组，并将其添加到容器div中去。

// 创建一个包含星星元素的数组
let stars = [];
for (let i = 0; i < 5; i++) {
  let star = document.createElement("i");
  star.className = "fa fa-star-o";
  star.setAttribute("data-index", i);
  star.addEventListener("click", onStarClick);
  stars.push(star);
}

// 将星星元素添加到容器div中去
let container = document.getElementById("star-container");
stars.forEach(star => container.appendChild(star));

1. 在CSS样式表中设置星星样式，这里我使用了FontAwesome字体库提供的星星图标样式。

.star-container i {
  font-size: 24px;
  color: gold;
  cursor: pointer;
}

1. 定义onStarClick回调函数，当我们单击一个星星元素时，该函数会将该元素以及其之前的所有星星元素的样式设置为实心的金色星星；同时，其之后的星星元素的样式将设置为空心的金色星星。

function onStarClick(event) {
  let index = parseInt(event.target.getAttribute("data-index"));

  // 设置当前星星元素及其之前的所有星星元素的样式
  for (let i = 0; i <= index; i++) {
    stars[i].className = "fa fa-star";
  }

  // 设置当前星星元素之后的所有星星元素的样式
  for (let i = index + 1; i < stars.length; i++) {
    stars[i].className = "fa fa-star-o";
  }
}

1. 最后，我们得到了一个简单的点击星星小游戏。

示例

以下是对第2步和第4步的示例说明。

示例1

在第2步中创建的数组，实际上是5个带有data-index属性的i标签元素，这些元素被存放在数组中，这些元素最终会被放置到HTML页面中。

let stars = [];
for (let i = 0; i < 5; i++) {
  let star = document.createElement("i");
  star.className = "fa fa-star-o";
  star.setAttribute("data-index", i);
  star.addEventListener("click", onStarClick);
  stars.push(star);
}

示例2

在第4步中定义的onStarClick回调函数，它使用了一个event.target对象，该对象代表的是当前被点击的元素，它拥有一个getAttribute方法，该方法可以读取该元素的某一属性的值，代码中读取了该元素的data-index值，这个值被用来确定该元素的位置，并确定如何更改样式。

function onStarClick(event) {
  let index = parseInt(event.target.getAttribute("data-index"));

  // 设置当前星星元素及其之前的所有星星元素的样式
  for (let i = 0; i <= index; i++) {
    stars[i].className = "fa fa-star";
  }

  // 设置当前星星元素之后的所有星星元素的样式
  for (let i = index + 1; i < stars.length; i++) {
    stars[i].className = "fa fa-star-o";
  }
}