花火4■複数の連発花火(div)kurt.grigg    UP日時 : 2016/05/25

●2016/05/25:原本自体が、即時関数で囲んでグローバル変数を消してあります。
同時に複数の花火が開くJavaScriptです。
実はこれは、新しく紹介するJavaScriptではなく、下記のJavaScriptを同じページで2個使用しているのです。

■花火の光点のサイズ指定等のできるJavaScriptはこちら→ 花火3■連発花火(div)kurt.grigg

原本のJavaScript自体が、同ページで複数使用しても動作するように作成されています。
だから複数使用しても、「グローバル変数」や「id」がぶつかることがありません。

同ページで、同じJavaScriptを使用するには「外部js」にするのが便利です。
この見本ではJavaScript部分だけを、「fireworks2.js」という名前で保存します。
名前はお好みで変更してもいいですが、拡張子は「js」を使用して下さい。
当サイトでソースをコピペして保存する時には、「●●.html」と拡張子を「html」にするのと同じ方法で、「●●.js」とします。
そして、その作成した「外部js」を「html」で呼び出します。
「外部js」にすると、複数の「html」で簡単にJavaScriptを呼び出すことができます。
なお、「●●.html」や「画像」をアップロードするように、「●●.js」もアップロードが必要です。

「html」で「外部js」を呼び出すには、「html」のbodyの中で
<script type="text/javascript" src="●●.js"></script>と記述します。
今回は2個使用しているので、上の記述を2行指定しました。

■原本のJavaScriptはこちら→ 花火3-1■連発花火(div)kurt.grigg 原本
■連続で透明な花模様が開くJavaScriptはこちら→ 花火3-2■連発花模様(div)kurt.grigg
■外部jsにして複数同時のJavaScriptの原本はこちら→ 花火4-1■複数の連発花火(div)kurt.grigg 原本

下記ソースは、「fireworks2.js」で保存する分と、「それを呼び出すhtml」分の2つがあります。