为什么我的代码显示星星按钮点击不工作?

Question

我有这个代码。当你按下一个按钮，它应该显示一些星星，但它不工作。我不知道为什么。有人能帮我吗?

// Options
var stars = 15;
var starSize = 96;
var starDistance = 200;
var starSpeed = 1.25;
var colors = [
"#ff0000", "#ff7f00", "#80ff00", "#00ff80", "#00ffff",
"#0080ff", "#0000ff", "#8000ff", "#ff00ff", "#fe007f"
];
function buildStars() 
{
for (i = 0; i < stars; i++) {
var id = 'gStar' + i;
var sz = Math.floor((Math.random() * (starSize)) + (starSize / 3));
var createStar = {
id: id,
class: "gStar",
html: '<i class="fa fa-star"></i>',
css: {
position: 'absolute',
zIndex: 510,
fontSize: sz + 'px',
opacity: 0
}
};
$("body").append($("<div>", createStar));
}
}
function fireStars() 
{
var target = $("body");

theme_color = colors[Math.floor(Math.random() * colors.length)];
do { theme_color_secondary = colors[Math.floor(Math.random() * colors.length)]; } 
while ( theme_color_secondary === theme_color )

for (i = 0; i < stars; i++) {
var sz = $("#gStar" + i).css("font-size").substr(0, ($("#gStar" + i).css("font-size").length - 2));
var dist = Math.floor((Math.random() * (starDistance)) + (starDistance / 4));
var angle = Math.floor((Math.random() * (i + 1 * (360 / stars))) + (i * (360 / stars)));

$("#gStar" + i).offset({top: target.offset().top + (target.height() / 2) - (sz / 2), left: target.offset().left + (target.width() / 2) - (sz / 2) });
var tl = gsap.timeline();
tl.set('#gStar' + i, { x: 0, y: 0, rotation: 0, scale: 0.35, left: target.offset().left + (target.width() / 2) - (sz / 2), top: target.offset().top + (target.height() / 2) - (sz / 2), color: ((i % 2 === 0) ? theme_color : theme_color_secondary) })
.to('#gStar' + i, 0.35, { autoAlpha: .7 })
.to('#gStar' + i, (Math.floor((Math.random() * (starSpeed * 100)) + ((starSpeed * 100) / 3)) / 100), {
x: Math.cos(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance)) + (starDistance / 4)), 
y: Math.sin(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance)) + (starDistance / 4)), 
rotation: 280, scale: 1,
ease: Power0.easenone,
z: 0.01, force3D: true
}, '<')
.to('#gStar' + i, 0.35, { 
autoAlpha: 0,
z: 0.01,
force3D: true
}, ">-.25");
}
}
buildStars();
$("body").click(fireStars);

html, body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
span {
font-size: 48px; 
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
font-weight: 100;
opacity: .85;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Good Job</span>

Answer 1

您错过了fontAwesome AND GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js" integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam+/wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

// Options
var stars = 15;
var starSize = 96;
var starDistance = 200;
var starSpeed = 1.25;
var colors = [
"#ff0000", "#ff7f00", "#80ff00", "#00ff80", "#00ffff",
"#0080ff", "#0000ff", "#8000ff", "#ff00ff", "#fe007f"
];
function buildStars() 
{
for (i = 0; i < stars; i++) {
var id = 'gStar' + i;
var sz = Math.floor((Math.random() * (starSize)) + (starSize / 3));
var createStar = {
id: id,
class: "gStar",
html: '<i class="fa fa-star"></i>',
css: {
position: 'absolute',
zIndex: 510,
fontSize: sz + 'px',
opacity: 0
}
};
$("body").append($("<div>", createStar));
}
}
function fireStars() 
{
var target = $("body");

theme_color = colors[Math.floor(Math.random() * colors.length)];
do { theme_color_secondary = colors[Math.floor(Math.random() * colors.length)]; } 
while ( theme_color_secondary === theme_color )

for (i = 0; i < stars; i++) {
var sz = $("#gStar" + i).css("font-size").substr(0, ($("#gStar" + i).css("font-size").length - 2));
var dist = Math.floor((Math.random() * (starDistance)) + (starDistance / 4));
var angle = Math.floor((Math.random() * (i + 1 * (360 / stars))) + (i * (360 / stars)));

$("#gStar" + i).offset({top: target.offset().top + (target.height() / 2) - (sz / 2), left: target.offset().left + (target.width() / 2) - (sz / 2) });
var tl = gsap.timeline();
tl.set('#gStar' + i, { x: 0, y: 0, rotation: 0, scale: 0.35, left: target.offset().left + (target.width() / 2) - (sz / 2), top: target.offset().top + (target.height() / 2) - (sz / 2), color: ((i % 2 === 0) ? theme_color : theme_color_secondary) })
.to('#gStar' + i, 0.35, { autoAlpha: .7 })
.to('#gStar' + i, (Math.floor((Math.random() * (starSpeed * 100)) + ((starSpeed * 100) / 3)) / 100), {
x: Math.cos(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance)) + (starDistance / 4)), 
y: Math.sin(angle * Math.PI / -180) * Math.floor((Math.random() * (starDistance)) + (starDistance / 4)), 
rotation: 280, scale: 1,
ease: Power0.easenone,
z: 0.01, force3D: true
}, '<')
.to('#gStar' + i, 0.35, { 
autoAlpha: 0,
z: 0.01,
force3D: true
}, ">-.25");
}
}
buildStars();
$("body").on("click",fireStars);

html, body {
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
span {
font-size: 48px; 
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
font-weight: 100;
opacity: .85;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js" integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam+/wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<span>Good Job</span>

Answer 2

函数gsap未定义。也许AJAX库是问题所在。

我有另一个密码给你。

<button onclick='this.value=🌟⭐🌟'>Click me</button>

错误消息

{
"message": "ReferenceError: gsap is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 73,
"colno": 18
}