我在我的网站上有一个实现particle.js的问题。我收到错误：未捕获的ReferenceError：未定义particlesJS。 我尝试从下载站点获得演示，它正在运行，然后我从那里复制代码而我的网站上没有任何内容。
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
/* Otherwise just put the config content (json): */
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}
#particles-js{
width: 100%;
height: 100%;
background-color: blue;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/progress.css">
<link rel="stylesheet" href="css/particles.css">
</head>
<body>
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar1">
☰
</button>
<a class="navbar-brand" href="#">MS</a>
<div class="collapse navbar-toggleable-xs" id="navbar1">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item active">
<a class="nav-link" href="#stage">Home <span class="sr-only">(current)</span></a>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</nav>
<!-- PARTICLES-->
<div id="particles-js"></div>
<div id="stage">
<div id="stage-caption">
<h1 class="display-3 fadeInDown animated ">
THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!</h1>
<p class="fadeInUp animated">
WHEN YOU NEED RESULTS
</p>
</div>
</div>
<section id="about">
<div class="container">
<div class="row">
<div class="section-content">
<div class="col-lg-6">
<div class="about-text">
<h3>About Me</h3>
<p class="lead">
Hello, my name is Mihael Sobočan, i am a web designer & front-end web developer. My job is to build your website so that it is functional and user-friendly but at the same time attractive.
</p>
<p>I love everything about the web, except Internet Explorer. I love creating new things with HTML5, CSS3, PHP and Javascript.</p>
</div>
</div>
</div>
<div class="section-contenta">
<div class="col-lg-5 col-lg-offset-1">
<div class="skills">
<p class="blured">My Skills</p>
<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #d35400;"><span>
<p class="blur">HTML</p></span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="70%">
<div class="skillbar-title" style="background: #2980b9;"><span>
<p class="blur">CSS</p></span></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">70%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="55%">
<div class="skillbar-title" style="background: #2c3e50;"><span>
<p class="blur">JAVA</p></span></div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">55%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="40%">
<div class="skillbar-title" style="background: #46465e;"><span>
<p class="blur">C++</p></span></div>
<div class="skillbar-bar" style="background: #5a68a5;"></div>
<div class="skill-bar-percent">40%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="70%">
<div class="skillbar-title" style="background: #333333;"><span>
<p class="blur">BOOTSTRAP</p></span></div>
<div class="skillbar-bar" style="background: #525252;"></div>
<div class="skill-bar-percent">70%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="1%">
<div class="skillbar-title" style="background: #27ae60;"><span>
<p class="blur">SINGING</p></span></div>
<div class="skillbar-bar" style="background: #2ecc71;"></div>
<div class="skill-bar-percent">1%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #27ae25;"><span>
<p class="blur">9GAG</p></span></div>
<div class="skillbar-bar" style="background: #2ecc20;"></div>
<div class="skill-bar-percent">100%</div>
</div>
<!-- End Skill Bar -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="feature-six" class="feature-dark">
<div class="container">
<div class="row">
<div class="feature-content">
<div class="col-lg-6 hidden-md-down">
<img src="img/explorer.jpg" alt="explorer">
</div>
<div class="col-lg-5 col-lg-offset-1">
<p>I genuinely believe that all experiences - good and bad - can have a positive effect.</p>
<img src="img/funny.jpg" alt="smile">
</div>
</div>
</div>
</div>
</section>
<footer id="main-footer">
<div class="container">
<div id="particles-js">
<div class="row">
<div class="col-md-6">
© 2016 The original Webdesigner<br>
Coded by Mihael Sobočan
</div>
<div class="col-md-2">
<ul class="list-unstyled">
<li><a href="#stage">Home</a></li>
<li><a href="#about">About me</a></li>
</ul>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
</div>
</div>
</footer>
<!-- Tether for Bootstrap -->
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/progress.js"></script>
<script src="js/app.js"></script>
<script src="js/particles.js"></script>
<script src="js/jquery.js"></script>
</body>
</html>
答案 0 :(得分：2)
您需要在运行主代码之前加载particles.js。您可以通过将defer标记添加到脚本元素来执行此操作。
<script src="mainScript.js" defer="defer"></script>
将mainScript替换为您的脚本文件名
答案 1 :(得分：2)
假设app.js是包含您在问题中粘贴的JavaScript代码的文件，那么这就是问题所在：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/progress.js"></script>
<!-- this file is included BEFORE particles.js! -->
<script src="js/app.js"></script>
<script src="js/particles.js"></script>
<script src="js/jquery.js"></script>
相反，请尝试
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/progress.js"></script>
<script src="js/app.js"></script>
<script src="js/jquery.js"></script>
答案 2 :(得分：1)
尝试在脚本声明之前加载particle.js
答案 3 :(得分：-1)
您必须先调用particle.js脚本文件，然后调用另一个脚本