JavaScript ステータスバーに時計や文字を表示

  Linux ファースト サーバー構築マニュアル トップ

ステータスバーとは、ブラウザ下のバーで通常はリンクの上にマウスを乗せるとリンク先のURLが表示されます。このステータスバーに時計やメッセージなどを表示する方法をここでは解説します。



【 1、ステータスバーにリアルタイム時計を表示する 】
以下を HTMLのhead内に記述してください。

<SCRIPT type="text/javascript">
<!--
function Watch() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var day = now.getDay();

if ( day == 0 ) { day = "日" }
if ( day == 1 ) { day = "月" }
if ( day == 2 ) { day = "火" }
if ( day == 3 ) { day = "水" }
if ( day == 4 ) { day = "木" }
if ( day == 5 ) { day = "金" }
if ( day == 6 ) { day = "土" }

if ( month < 10 ) { month = "0" + month }
if ( date < 10 ) { date = "0" + date }
if ( hour < 10 ) { hour = "0" + hour }
if ( min < 10 ) { min = "0" + min }
if ( sec < 10 ) { sec = "0" + sec }

window.status = year + "年" + month + "月" + date
+ "日(" + day + ") "+ hour + "時" + min + "分" + sec + "秒";
setTimeout ("Watch()",500);
}
Watch()
//-->
</SCRIPT>


【 2、ステータスバーに文字を表示する 】
以下を HTMLのhead内に記述してください。

<SCRIPT type="text/javascript">
<!--
defaultStatus="ここの文字が表示されます";
//-->
</SCRIPT>

【 3、ステータスバーに文字を流す 】
以下を HTMLのhead内に記述してください。

<SCRIPT type="text/javascript">
<!--
var msg; msg="ここの文字が流れます";
msg=msg+msg;
function disp(){setTimeout("disp()",300);
msg=msg.substring(2,msg.length)+msg.substring(0,2);
window.status=msg;
}
document.write('<BODY onLoad="disp()">');
//-->
</SCRIPT>


【 4、ステータスバーの文字が集まる 】
以下を HTMLのhead内に記述してください。

<SCRIPT type="text/javascript">
<!--
msg = "ここの文字が集まります";
timeID = 10;
stcnt = 16;
wmsg = new Array(33);
wmsg[0]=msg;
blnk = " ";
for (i=1; i<32; i++)
{
b = blnk.substring(0,i);
wmsg[i]="";
for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b;
}

function wiper()
{
if (stcnt > -1) str = wmsg[stcnt]; else str = wmsg[0];
if (stcnt-- < -40) stcnt=31;
status = str;
clearTimeout(timeID);
timeID = setTimeout("wiper()",100);
}

wiper()
//-->
</SCRIPT>

【 5、ステータスバーにリンク先のURLを表示させない 】

以下を head内に記述してください。

<script type="text/javascript">
<!--
function hihyouzi(){
window.status = '';
return true;
}
if (document.layers)
document.captureevents(event.mouseover | event.mouseout);
document.onmouseover = hihyouzi;
document.onmouseout = hihyouzi;
// -->
</script>


   

 → Linux サーバ構築マニュアル トップへ戻る



Copyright (c) 2007 linux.bakufu.org All Rights Reserved.