html頁面中的多個js文件

Question

我在P5JS中編寫一些代碼。 我想在我的HTML頁面中添加多個JS文件。 但是，當我這樣做時，頁面上僅顯示最后一個。 如何顯示所有這些？ 我該如何給每個人定型？ 例如，我想在頁面頂部顯示其中之一，然后顯示一些HTML文件或文本或其他內容，然后在其下面顯示另一個JS文件。 如何使用CSS設置樣式？ 我已經將CSS文件鏈接到HTML頁面。

該網站不允許我按照我想要的方式粘貼代碼，因此我在此處上傳了圖片

謝謝..

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 個解決方案

解決方案1
1 2018-07-10 23:31:06

解決方案2
1 2018-08-28 11:04:43

html頁面中的多個js文件

問題描述

2 個解決方案

解決方案1 1 2018-07-10 23:31:06

解決方案2 1 2018-08-28 11:04:43

解決方案1
1 2018-07-10 23:31:06

解決方案2
1 2018-08-28 11:04:43