合体１８■枠内で複数の魚が泳ぐリアル時計

●2016/07/21：即時関数で囲んで、グローバル変数を消しました。
リアル時計の付いた、複数の魚が枠線で囲まれた領域の中を泳ぐ、範囲指定の JavaScript です。
今回は「id="Sa"」を指定した div の領域を、魚が泳ぎます。

この見本で、サンゴの画像を範囲指定（#Sa）の下側にピッタリくっつけて配置する場合、基準の「#Sa」に対して、CSSで「bottom:0;」と指定します。
HTML4ならこれでピッタリくっつきますが、HTML5では少し余白ができます。
その余白を消すために、さらに img タグに「vertical-align:bottom;」の指定を入れます。
HTML4なら初期値が「vertical-align:bottom;」なので、上記の記述は入れても入れなくても、下側にピッタリくっつきます。

領域の中の時計や、魚以外の画像は、<div id="Sa">～～～</div>の領域中で、「position:absolute;」指定で記述します。
「position:absolute;」の基準位置は「id="Sa"」になります。
領域の中の文字の位置指定の方法の参考はAllAboutから。

■合体元JavaScriptはこちら→　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>合体１８■枠内で複数の魚が泳ぐリアル時計</title>

<!--★ここからコピー-->
<style type="text/css"><!--

body{background:#eda;}/*★背景色指定　薄茶色*/

/*★#Sa必須。魚が泳ぐ領域。サイズはお好みで*/
#Sa{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★上下、左右の位置指定*/
width:180px;/*★横幅指定*/
height:400px;/*★縦幅指定*/
background:linear-gradient(#00f,#3b7);/*★背景色のグラデーション。青→緑。グラデは使用せず、背景色や背景画像を指定しても可*/
border:solid 1px #555;/*★灰色の枠指定*/
box-shadow:inset -3px -50px 50px #fff;/*★領域の内側に白色の影指定。削除しても可*/
}

/*★必須。時計の文字指定*/
#timeF,#timeD{
position:absolute;/*★必須。#Saを基準位置にするため*/
top:30px;
width:180px;
text-align:center;
font: bold 30px Arial,s0ans-serif;/*★太字、サイズ、フォント書体を一括指定*/
color: #ace;/*★文字色　水色*/
text-shadow: 5px 5px 5px #000;/*★文字の影指定。黒色のボカシ*/
}
#timeD{
top:10px;/*★年月日の位置*/
font: bold 20px Arial,s0ans-serif;/*★年月日の太字、サイズ、フォント書体を一括指定*/
}

/*★ここから以降のサンゴと貝の画像位置指定は不要なら削除。#Saを基準位置にするため、position:absolute;は必須*/

.ue{ position:absolute; bottom:0; right:0; z-index:2;}/*★サンゴ画像位置指定。魚よりもサンゴ画像を上(手前)に表示*/
.ue img{ vertical-align:bottom;}/*★HTML5でサンゴ画像と範囲領域の縦の隙間を消す。不要なら削除*/
.sita{ position:absolute; bottom:50px; left:20px;}/*★貝の画像位置指定。魚より下(奥)になる分はz-index指定は不要*/

/*★サンゴと貝の画像位置指定ここまで。不要なら削除*/

--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。ここから範囲指定の位置開始。id="Sa"は必須。-->
<div id="Sa">
<p id="timeD"></p><p id="timeF"></p><!--★←時計文字の位置。魚より下(奥)-->
<div class="ue"><img src="toy6.png"><img src="toy7.png"></div><!--★←サンゴ画像は見本なのでこの１行は削除。画像指定の参考用。魚より上(手前)-->
<img src="ken2.gif" class="sita"><!--★←貝のアニメGIF画像は見本なのでこの１行は削除。画像指定の参考用。魚より下(奥)-->
</div>
<!--★ここまで範囲指定の位置終了-->

<script type="text/javascript"><!--
/*===============================================================================
リアル時計付きの範囲指定の複数画像のランダム移動　　★2016/07/21
複数画像のランダム移動　BY　Multi Random Movement 2 Script by kurt.grigg@virgin.net
リアル時計  By  http://makemobile.6.tool.ms/121/
================================================================================*/
(function (){ //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★魚の画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var Pic=["bu6.gif","bu7.gif","bu8.gif"];
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var nm=10;    //★画像表示数
var inZ=1;    //★魚と他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
var spd=60;   //★速度。原本10。数値が大きいほど遅い

//指定ここまで--------------------------------------------------------------------------------------
var n=Pic.length;
var load=new Array(); for(var p=0; p<n; p++){load[p]=new Image(); load[p].src=myurl+Pic[p];}//画像先読み
var VB=0,HB=0,R=[],PB=[],RD=[],Y=[],X=[];
var D=[],SP=[],BY=[],BX=[];
for (var i=0; i<nm; i++){
document.write("<img src="+myurl+Pic[i%n]+" id='pics"+i+"' style='z-index:"+inZ+";'>");
Y[i]=10;
X[i]=10;
D[i]=Math.floor(Math.random()*70+10);
SP[i]=Math.floor(Math.random()*4+2);/*MaxSpeed=4  MinSpeed=2の数値。大きいほど速い*/
}
function Curve(){
var plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5);
for (i=0; i<nm; i++){
R[i]=Math.floor(Math.random()*plusMinus.length);
RD[i]=plusMinus[R[i]];
}
setTimeout(Curve,1500);
}
function MoveRandom(){
var H=Sa.clientHeight;
var W=Sa.clientWidth;
var YS=Sa.clientTop+Sa.offsetTop;
var XS=Sa.clientLeft+Sa.offsetLeft;
for (i=0; i<nm; i++){
BY[i]=-(document.getElementById("pics"+i).offsetHeight);//修正
BX[i]=-(document.getElementById("pics"+i).offsetWidth);//修正
PB[i]=D[i]+=RD[i];
var y=SP[i]*Math.sin(PB[i]*Math.PI/180);
var x=SP[i]*Math.cos(PB[i]*Math.PI/180);
if (D[i] < 0){ D[i]+=360;}
Y[i]+=y; X[i]+=x; VB=180-D[i]; HB=0-D[i];
//Corner rebounds! not necessary but looks nice.
if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}
if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;}
if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;}
if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;}
//Edge rebounds!
if (Y[i] < 1) {Y[i]=1;D[i]=HB;}  
if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;}  
if (X[i] < 1) {X[i]=1;D[i]=VB;} 
if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;} 
var ob=document.getElementById("pics"+i).style;
ob.top=Y[i]+YS+"px";
ob.left=X[i]+XS+"px";
ob.position="absolute";
}
setTimeout(MoveRandom,spd);Clk();
}
//ここから時計部分------------------------------------------------
function Clk(){
function f(n){return n<10?"0"+n:n;}
var t=new Date;
document.getElementById("timeD").innerHTML=f(t.getFullYear())+"/"+f(t.getMonth()+1)+"/"+f(t.getDate());//年月日
document.getElementById("timeF").innerHTML=f(t.getHours())+":"+f(t.getMinutes())+":"+f(t.getSeconds());//時刻
}
Curve(); MoveRandom();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

合体１８■Fl+Ot■ 枠内で複数の魚が泳ぐリアル時計 UP日時 : 2016/07/21

　合体１８■Fl+Ot■　枠内で複数の魚が泳ぐリアル時計　　　　UP日時 : 2016/07/21