Question

我正在用P5JS编写一些代码。我想在我的HTML页面中添加多个JS文件。但是，当我这样做时，页面上仅显示最后一个。如何显示所有这些？我该如何给每个人定型？例如，我想在页面顶部显示其中之一，然后显示一些HTML文件或文本或其他内容，然后在其下面显示另一个JS文件。如何使用CSS设置样式？我已经将CSS文件链接到HTML页面。

The site didn't allow me to paste the code the way I wanted so I uploaded the picture here

谢谢..

Answer 1

您可以将所有js文件放在头部：

<html>
<head>
<script src=script1.js></script>
<script src=script2.js></script>
</head>
<body>
</body>
</html>

或者您可以将其放在文件底部：

<html>
<head>
</head>
<body>
</body>
<script src=script1.js></script>
<script src=script2.js></script>
</html>

Answer 2

如果要将多个p5js草图添加到一个HTML文档中，则可以创建p5实例，以将所有变量保留在页面的全局范围之外。

例如以下内容另存为'sketch.js'的示例：

var sketch = function( p ) {

  var x = 100; 
  var y = 100;

  p.setup = function() {
    p.createCanvas(700, 410);
  };

  p.draw = function() {
    p.background(0);
    p.fill(255);
    p.rect(x,y,50,50);
   };
};

var myp5 = new p5(sketch);

然后导入草图并在HTML的div中使用它。

<html>
<head>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="libraries/p5.js></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
</style>
</head>
<body>
    <div id="sketch"></div>
</body>
</html>

然后您将重复其他草图。您甚至可以在一个js文件中包含多个p5js草图。

有了草图和html的代码，这可能很快就会解决。

html页面中的多个js文件

2 个答案: