きらめく星座
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
.star {position:absolute;color:yellow;font-size:8pt}
--></style>
<script language="JavaScript"><!--
var skyW; //空の幅
var skyH; //空の高さ
var sn = 100; //星の数
function Init(){ //初期化
skyW = document.body.clientWidth-150;
sky.style.width = skyW;
skyH = sky.style.pixelHeight;
//各星の大きさと位置をﾗﾝﾀﾞﾑに設定
for(var i = 0 ; i < sn ; i++) {
el = "st"+i;//"st0"〜"st99"のﾀｸﾞID名を取得
document.all[el].style.fontSize =
Math.floor(Math.random()*12)+3;
document.all[el].style.pixelTop =
Math.floor(Math.random()*skyH);
document.all[el].style.pixelLeft =
Math.floor(Math.random()*skyW);
}
StarChange();
}
var col = new Array("white","yellow","lime",
"pink","deepskyblue","gray"); //色の配列
var flg = 0; //空の暗さを変化さすかどうか
var c = 15;
var dc = 10;
var timerID;
function StarChange(){
//星の色を、色配列から選び変化さす
for(var i = 0 ; i < sn ; i++){
var n = Math.floor(Math.random()*6);
el = "st" + i; //"st0"〜"st99"のﾀｸﾞID名を取得
document.all[el].style.color = col[n];
}
//空の色を時間と共に＜黒←→白＞と変化さす
if(flg == 1){
cc = c.toString(16); //16進数に変換
if(cc.length<2)cc = "0"+cc;//1桁の場合は0を付ける
sky.style.backgroundColor =
"#"+cc+cc+cc;
if(c < 10 || c > 245)dc = -dc;
c += dc;
}
timerID = setTimeout("StarChange()",2000);
}
function SkyColor(){
if(flg == 0){
flg = 1;
bt.innerText = "空の暗さを変化させない";
}else{
flg = 0;
bt.innerText = "空の暗さを変化さす";
}
}
//--></script>
</head>
<body onload="Init()">
<div id="sky" style="position:absolute;
height:300;background-color:black;">
<script language="JavaScript"><!--
//spanﾀｸﾞで囲った文字★を100個書く
var txt = "";
for(var i = 0 ; i < sn ; i++) {
txt += "<span id='st"+i+"' class='star'>★</span>";
}
document.write(txt);
//--></script>
</div>
<button id="bt" onclick="SkyColor();">
空の暗さを変化さす</button>
end(最終更新:12/11/10)