实现点击星星小游戏是一项非常有趣的javascript编程任务,下面是一份简单的攻略。
<div id="star-container" style="width: 400px; height: 50px;"></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));
.star-container i {
font-size: 24px;
color: gold;
cursor: pointer;
}
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";
}
}
以下是对第2步和第4步的示例说明。
在第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);
}
在第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";
}
}
本文链接:http://task.lmcjl.com/news/8532.html