お知らせ花火（バック色付き）
【IE5】
私の出しているもう１つのHP「ExcelVBA便利帳」が100万アカウントを達成した。
記念にそのHPのトップページに花火でも上げようと思いこのサンプルを作成しました。
前2例では、ページに各種色が付いていると文字がよく見えません。
したがって本例では文字のバックに色を付けました。
【実用編へ戻る】
<html>
<head>
<title>お知らせ花火３</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
// ******** 下記を必要に応じ変更（KIの実用JavaScript）***************
var msg0= " バンザイ ばんざい バンザイ ばんざい" ; //表示する文字１
var msg1= " アカウント１００万達成ありがとう御座いました。" ; //表示する文字２
var msg2= " 更に皆様に活用して頂けるページを目指しガンバリます。" ; //表示する文字３
R = 10; // 半径
speed1= 50; // 拡大するスピード
basyo1=8 // 内側文字の表示位置（文字サイズと半径により調整）
basyo2=16 // 中側文字の表示位置
basyo3=28 // 外側文字の表示位置
speed2= 2000; // 最後に表示している時間
// *******************************************************************
pi = Math.PI / 180;
mozsu0=msg0.length;
mozsu1=msg1.length;
mozsu2=msg2.length;
timerID=0;
var hozyo=0;
var cnt=0;
var cnty=8;
var cnts=0;
var cntse=mozsu2*2;
if (document.all){sx=screen.width;sy=screen.height;}
chuusin_x=sx /2;
chuusin_y=(sy-200) /2;
function utiage(){
if (document.layers){return}
yy1=(sy*0.6) / 8;
yy=chuusin_y + yy1*cnty;
window["tama"].style.pixelLeft=chuusin_x; window["tama"].style.pixelTop=yy;
cnty += -1;
clearTimeout(timerID);
if (cnty >= 0 )timerID=setTimeout("utiage()",50);
if (cnty < 0 ){
hanabi();
window["tama"].style.pixelLeft=-200; window["tama"].style.pixelTop=-200;
}
}
function hanabi(){
if (cnt ==0){hozyo="0";mozsu=mozsu0;}
for (i=0; i<mozsu; i++) {
layerid = "div" + hozyo + (i);
kakudo = (i * 360 / mozsu);
COS = Math.cos(kakudo * pi);
SIN = Math.sin(kakudo * pi);
xx = (COS + SIN)*R +chuusin_x;
yy = (SIN - COS)*R +chuusin_y;
window[layerid].style.pixelLeft=xx; window[layerid].style.pixelTop=yy;
}
R += 5;
clearTimeout(timerID);
cnt=cnt + 1;
if (cnt > basyo1){hozyo="1";mozsu=mozsu1;}
if (cnt > basyo2){hozyo="2";mozsu=mozsu2;}
if (cnt < basyo3){timerID = setTimeout("hanabi()",speed1);}
if (cnt >= basyo3) owari1();
}
function owari1(){
timck = (new Date()).getTime() + speed2; //全体の表示時間
do {;} while((new Date()) < timck);
owari2();
}
function owari2(){
j= Math.floor(Math.random()*3);
if (j==0) mozsu=mozsu0;
if (j==1) mozsu=mozsu1;
if (j==2) mozsu=mozsu2;
i= Math.floor(Math.random()*mozsu);
layerid = "div" + j + (i);
window[layerid].style.pixelLeft=-200; window[layerid].style.pixelTop=-200;
cnts += 1;
clearTimeout(timerID);
if (cnts < cntse) {timerID = setTimeout("owari2()",1);}
if (cnts >= cntse ) owari3();
}
function owari3(){
for (j=0; j<3;j++){
if (j==0) mozsu=mozsu0;
if (j==1) mozsu=mozsu1;
if (j==2) mozsu=mozsu2;
for (i=0; i<mozsu; i++) {
layerid = "div" + j + (i);
window[layerid].style.pixelLeft=-200; window[layerid].style.pixelTop=-200;
}
}
}
// -->
</SCRIPT>
</head>
<BODY bgcolor=#FFFFEE onLoad="utiage()">
<b>お知らせ花火（バック色付き）</b><br>
<font size=2>【IE5】
<hr>
私の出しているもう１つのHP「ExcelVBA便利帳」が100アカウントを達成した。
記念にそのHPのトップページに花火でも上げようと思いこのサンプルを作成しました。<br>
前2例では、ページに各種色が付いていると文字がよく見えません。
したがって本例では文字のバックに色を付けました。<br>
<FORM name="FM1">
<INPUT type="button" value="花火の打上（再読込）"
onClick="location.reload()"><br><br>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all){
var shoki=" STYLE='position:absolute;left:-200px;top:-200px;"
for (n=0;n<3;n++){
if (n==0) {mozsu=mozsu0;msg = msg0.split("");}
if (n==1) {mozsu=mozsu1;msg = msg1.split("");}
if (n==2) {mozsu=mozsu2;msg = msg2.split("");}
if (n==0) siz="font-size:20px;" // 文字サイズ
if (n==1) siz="font-size:30px;"
if (n==2) siz="font-size:40px;"
for (i=0;i<mozsu;i++) {
rrr= Math.floor(Math.random()*255); //文字の色
ggg= Math.floor(Math.random()*255);
bbb= Math.floor(Math.random()*255);
bg1= rrr.toString(16);
bg2= ggg.toString(16);
bg3= bbb.toString(16);
rgb=bg1+bg2+bg3;
// バックカラー補色
rrf = Math.round("0xff" - ("0x" + bg1)).toString(16);
ggf = Math.round("0xff" - ("0x" + bg2)).toString(16);
bbf = Math.round("0xff" - ("0x" + bg3)).toString(16);
back = rrf + ggf + bbf;
iro="color:#" + rgb +";background-color:" + back + ";"
document.write ("<div id='div" + n + i + "'" + shoki + iro + siz + "'>")
document.write(msg[i])
document.write ("</div>")
}
}
document.write ("<div id='tama'" + shoki + "'><IMG SRC='tama.gif'></div>")
}
// -->
</SCRIPT>
<BR>
</body>
</html>