ふわふわ■花火３-１　連発花火（div）kurt.grigg 原本

●2016/05/25：原本自体が、即時関数で囲んでグローバル変数を消してあります。
新しく　KURT'S DHTML　で見つけた、連発花火の「kurt.grigg の原本」のJavaScriptです。
前回掲載分の原本は、HTML5では使用できませんでしたが、今回の原本は使用できます。
HTML5時は、すべてのブラウザで正常に動作します。
しかし HTML4時のみ、ブラウザIE11だけが何も要素が無い時の動作（高さの指定）が少しおかしいです。
ただし img でも div でも、何か要素が入れば問題ありません。

それでも気になる時は、ドキュメント宣言を
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">　から
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">　へ
修正すると、HTML4でブラウザIE11もきちんと動作します。

■花火の光点のサイズ指定等のできるJavaScriptはこちら→　花火３■連発花火（div）kurt.grigg
■連続で透明な花模様が開くJavaScriptはこちら→　花火３-２■連発花模様（div）kurt.grigg
■外部jsにして複数同時のJavaScriptはこちら→　花火４■複数の連発花火（div）kurt.grigg
■外部jsにして複数同時のJavaScriptの原本はこちら→　花火４-１■複数の連発花火（div）kurt.grigg 原本

<!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の中です-->
<script type="text/javascript"><!--
/*=======================================================================
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.
// --></script>
<!--★コピーここまで-->

</body>
</html>

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

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