時計の色と大きさをかえてみよう
表示の例
 あなたのホームページの色にあわせて、文字の色や背景の色をかえることができます。
※ I.E.(Internet Explorer)だけ色がかわります。
プログラムAのソースをコピーして、時計を表示させたい場所のHTMLソースのBODY区間に貼り付けしましょう。
プログラムAのソース
<FORM name="myform2">
<INPUT name="myclock2" size="17" style="background-color:#000000; color:#00FFFF; font-size:12pt; font-weight:bold">
</FORM>
テキストボックスのよこの大きさをかえる場合は、size="17" の 17 をかえてください。
プログラムAのソースの2行目の、background-color:#000000; color:#00FFFF; の部分で背景の色や文字の色を指定しています。
background-color:#000000; の #000000 が背景の色で、color:#00FFFF; の #00FFFF が文字の色ですから、ここをあなたの好きな色にかえてみてくださいね。
かえるところ ソースをかえるところ
文字の色 color:#00FFFF の #00FFFF
文字の大きさ font-size:12pt の 12
背景の色 background-color:#000000 の #000000
プログラムBのソースをコピーして、HTMLソースのHEAD区間に貼り付けしましょう。
プログラムBのソース
<SCRIPT LANGUAGE="JavaScript">
<!--
function Clock2(){
myDate=new Date();
myHour=myDate.getHours();
myMinute=myDate.getMinutes();
mySecond=myDate.getSeconds();
if (myHour<10) {myHour="0"+myHour}
if (myMinute<10) {myMinute="0"+myMinute}
if (mySecond<10) {mySecond="0"+mySecond}
document.myform2.myclock2.value=" "+myHour+" 時 "+myMinute+" 分 "+mySecond+" 秒 ";
setTimeout("Clock2()",1000);
}
//-->
</SCRIPT>
プログラムCのソースをコピーして、HTMLソースの<body の y のすぐうしろに半角スペースをひとつ入力してから貼り付けしましょう。
プログラムCのソース
onload="Clock2()"
ソースの文字をかえる時に、" や ; を消してしまわないようにしてください。
5・6年生にもわかるやさしいJavaScriptのTOPへ