ふわふわ■花火４-１　複数の連発花火（div）kurt.grigg 原本

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

■原本のJavaScriptはこちら→　花火３-１■連発花火（div）kurt.grigg 原本

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

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

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

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

/*=======================================================================
Fireworks - http://www.btinternet.com/~kurt.grigg/javascript (閉鎖済)
掲載サイト：http://www.kurtsdhtml.talktalk.net/
===========================================================================*/
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

var showerCol = new Array('#000000','#ff0000','#000000','#00ff00','#ff00ff','#ffffff','#ffa500','#000000','#fff000');
var launchCol = new Array('#ffa500','#00ff00','#ffaaff','#fff000','#ffffff');
var launchColour = "#00ff00";
var rs = 30; 
var y = 200;
var x = 200;
var h;
var w;
var xs = 190;
var t = null;
var ss = 1;
var e = 360/14;
var f = new Array();
var c1 = -1;
var c2 = 5;
var r;

var pix = "px";

var strictmod = ((document.compatMode) && 
document.compatMode.indexOf("CSS") != -1);

var o;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var n = 14;
var idx = 1;

for (i = 0; i < n; i++){
 if ( document.getElementById(idx+i) ){ 
 idx = (idx+=(n));
 }
}

for (i = 0; i < n; i++){
document.write('<div id='+(idx+i)+' style="position:absolute;top:0px;left:0px;'
+'height:1px;width:1px;font-size:1px;background-color:'+launchColour+'"><\/div>');
}

if (domWw) r = window;
else{ 
  if (document.documentElement && 
  typeof document.documentElement.clientWidth == "number" && 
  document.documentElement.clientWidth != 0)
  r = document.documentElement;
 else{ 
  if (document.body && 
  typeof document.body.clientWidth == "number")
  r = document.body;
 }
}

function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}


function wndwsz(){
if (domWw){
  h = r.innerHeight; 
  w = r.innerWidth;
 }
 else{
  h = r.clientHeight; 
  w = r.clientWidth;
 }
o = (w >= h)?h:w;
}

function rst(){
c1 = 0;
launchColour = launchCol[Math.floor(Math.random() * launchCol.length)];
xs = Math.round(100+Math.random() * (o/4));
y = xs + Math.round(Math.random() * (h-(xs*2.2))) + scrl(0);
x = xs + Math.round(Math.random() * (w-(xs*2.2))) + scrl(1);
ss = 1;
for (i=0; i < n; i++){
 f[i].backgroundColor = launchColour;
 f[i].width = ss + pix;
 f[i].height = ss + pix;
 f[i].fontSize = ss + pix;
}
dsply();
}

function dsply(){
c1 += c2;
t = setTimeout(dsply,rs);
for (i  =0; i < n; i++){
f[i].top = y + xs * Math.sin(i*e*Math.PI/180) * Math.sin(c1/100) + pix;
f[i].left= x + xs * Math.cos(i*e*Math.PI/180) * Math.sin(c1/100) + pix;
 if (c1 > 100){
 ss = (xs < 150)?1:Math.round(1+Math.random()*2);
 f[i].backgroundColor = showerCol[Math.floor(Math.random()*showerCol.length)];
 f[i].width = ss + pix;
 f[i].height = ss + pix;
 f[i].fontSize = ss + pix;
 }
}
if (c1 > 160){
 clearTimeout(t);
 rst();
}
}

function init(){
wndwsz();
for (i = 0; i < n; i++){
f[i] = document.getElementById(idx+i).style;
}
var strt = Math.floor(500+Math.random()*2000);
setTimeout(dsply,strt);
}

if (window.addEventListener){
 window.addEventListener("resize",wndwsz,false);
 window.addEventListener("load",init,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",wndwsz);
 window.attachEvent("onload",init);
} 

})();
}//End.

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ふわふわ■花火４-１　複数の連発花火（div）kurt.grigg 原本</title>

<!--★背景画像設定。不要なら削除。ここから-->
<style type="text/css"><!--
body{  /*★今回使用した背景画像は横幅472px高さ23pxの細い横長の画像です*/
background:url(katu3.gif) repeat-x left bottom fixed #000;/*★下側に横並び指定。固定位置。背景色黒色*/
}
--></style>
<!--★背景画像設定。ここまで-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です。同じJavaScriptを２個呼び出す-->
<script type="text/javascript" src="fireworks.js"></script>
<script type="text/javascript" src="fireworks.js"></script>
<!--★コピーここまで-->

</body>
</html>

花火４-１■複数の連発花火（div）kurt.grigg 原本 UP日時 : 2016/05/25

　花火４-１■複数の連発花火（div）kurt.grigg 原本　　　　UP日時 : 2016/05/25