参考サイト
- サンプル取得元
- JavaScript basic samples
- 参考
- とほほのJavaScriptリファレンス
１：チェックボックスで画像を変更
スクリプト
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
function changeImage(imgnum){
if(imgnum==1){
document.myimg.src="img1.gif";
}else if(imgnum==2){
document.myimg.src="img2.gif";
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG src="img1.gif" name="myimg" border=0>
<FORM>
<INPUT type="radio" name="imgradio" checked onClick="changeImage(1)">イメージ1
<INPUT type="radio" name="imgradio" onClick="changeImage(2)">イメージ2
</FORM>
</CENTER>
</BODY>
</HTML>
http://www.sumnet.ne.jp/domp/jsbs/kaisetsu/image6.htmより。
解析
> function changeImage(imgnum){
> if(imgnum==1){
> document.myimg.src="img1.gif";
> }else if(imgnum==2){
> document.myimg.src="img2.gif";
> }
> }
引数として「imgnum」を指定した関数。
「imgnum」の内容により、「myimg」というname属性を持つ要素のsrc属性を変更している。
> <FORM>
> <INPUT type="radio" name="imgradio" checked onClick="changeImage(1)">イメージ1
> <INPUT type="radio" name="imgradio" onClick="changeImage(2)">イメージ2
> </FORM>
引数「imgnum」に値を渡し、表示画像を変更している。
改造
<HTML>
<HEAD>
<TITLE>三つの画像から選択</TITLE>
<SCRIPT language="JavaScript">
<!--
function changeImage(imgnum){
if(imgnum==1){
document.myimg.src="gothic.png";
}else if(imgnum==2){
document.myimg.src="38_01.png";
}else if(imgnum==3){
document.myimg.src="38_02.png";
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG src="img1.gif" name="myimg" border=0>
<FORM>
<INPUT type="radio" name="imgradio" checked onClick="changeImage(1)">イメージ1
<INPUT type="radio" name="imgradio" onClick="changeImage(2)">イメージ2
<INPUT type="radio" name="imgradio" onClick="changeImage(3)">イメージ3
</FORM>
</CENTER>
</BODY>
</HTML>
画像を３つにしてみた→サンプル
２：テキストを一文字ずつ表示
スクリプト
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
var msg="Wellcome to my Home Page ! ! ! ! !";
i=0;
function Start(){
if(i<=msg.length){
document.myform.mytext.value=msg.substring(0,i);
i=++i;
setTimeout("Start()",200);
}else{
i=0;
setTimeout("Start()",3000);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Start()">
<CENTER>
<FORM name="myform">
<INPUT name='mytext' size='40'>
</FORM>
</CENTER>
</BODY>
</HTML>
http://www.sumnet.ne.jp/domp/jsbs/kaisetsu/page3.htmより。
解析
> var msg="Wellcome to my Home Page ! ! ! ! !";
> i=0;
で、変数「msg」に文字列を、「i」に0を代入している。
> function Start(){
> if(i<=msg.length){
> document.myform.mytext.value=msg.substring(0,i);
> i=++i;
> setTimeout("Start()",200);
> }else{
> i=0;
> setTimeout("Start()",3000);
> }
> }
ifは、文字列の長さと「i」の値を比べ、文字列の長さが「i」以上の時とそうでないときを分けている。
> document.myform.mytext.value=msg.substring(0,i);
ここでは、name属性としてmyformを持つ要素内の、mytextというnameを持つ要素のvalue属性に変数「msg」の0文字目から「i」文字目までを代入している。
> i=++i;
「i」に1を足して「i」に代入
> setTimeout("Start()",200);
0.2秒後に関数Start()を実行させる。
elseの
> i=0;
> setTimeout("Start()",3000);
「i」に0を代入し、3秒後に関数Start()を実行させることで最初の状態に戻している。
改造
<HTML>
<HEAD>
<TITLE>テキストを後ろから一文字ずつ表示</TITLE>
<SCRIPT language="JavaScript">
<!--
var msg="Willkommen auf meiner Webseite! ! ! !";
i=msg.length;
function Start(){
if(i>=0){
document.myform.mytext.value=msg.substring(i);
i=--i;
setTimeout("Start()",200);
}else{
i=msg.length;
setTimeout("Start()",3000);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Start()">
<CENTER>
<FORM name="myform">
<INPUT name='mytext' size='40'>
</FORM>
</CENTER>
</BODY>
</HTML>
逆再生にしてみた。後ろの文字から表示される。→サンプル
３：リアルタイムクロック
スクリプト
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
function Clock(){
acDate=new Date();
myHour=acDate.getHours();
myMinute=acDate.getMinutes();
mySecond=acDate.getSeconds();
document.myform.myclock.value=myHour+"時"+myMinute+"分"+mySecond+"秒";
setTimeout("Clock()",1000);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Clock()">
<CENTER>
<FORM name="myform">
<INPUT name="myclock" size="20">
</FORM>
</CENTER>
</BODY>
</HTML>
http://www.sumnet.ne.jp/domp/jsbs/kaisetsu/clock2.htmより。
解析
> acDate=new Date();
new Date()で現在の時刻を取得し、「acDate」に代入。
> myHour=acDate.getHours();
> myMinute=acDate.getMinutes();
> mySecond=acDate.getSeconds();
acDateから時、分、秒を取得。
> document.myform.myclock.value=myHour+"時"+myMinute+"分"+mySecond+"秒";
指定されたテキストエリアに書き込み。
> setTimeout("Clock()",1000);
一秒ごとに繰り返し。
改造
<html>
<head>
<meta charset="SHIFT_JIS" />
<title>JavaScriptとCSSでアナログ時計</title>
<style>
div.clock{position:relative;width:206px;height:206px;margin:auto;}
div.clock>img{position:absolute;z-index:3;opacity:0.5;top:1px;left:1px;}
div.clockA{background:url(clockbase.gif) #202020;width:200px;height:200px;position:relative;border-radius:100px;-moz-border-radius:100px;border:outset 3px #eeeeee;overflow:hidden;}
div.clockA>img{position:absolute;top:0;left:0;width:200px;height:200px;z-index:2;}
.clockB{position:absolute;top:63%;width:90px;margin-left:57px;font-family:"OCR A Extended";background-color:rgba(200,200,200,0.3);color:yellow;text-align:center;z-index:1;text-shadow:#000000 0 0 1px;border:inset 1px rgba(90,90,90,0.2)}
</style>
<script language="JavaScript">
//<!--
function Clock(){
acDate=new Date();
myHour=acDate.getHours();
ap=myHour;
if (myHour > 12) { myHour = myHour-12; }
myMinute=acDate.getMinutes();
mySecond=acDate.getSeconds();
h=(myHour/12)*360;
m=(myMinute/60)*360;
s=(mySecond/60)*360;
s=Math.round(s*100)/100;
if (ap < 10) { ap = "0" + ap; }
if (myMinute < 10) { myMinute = "0" + myMinute; }
if (mySecond < 10) { mySecond = "0" + mySecond; }
h=h+m/12;
h=Math.round(h*100)/100;
m=m+s/60;
m=Math.round(m*100)/100;
document.all.javaclock.innerHTML ="<img src=\"hour.gif\" style=\"transform: rotate(" + h + "deg);-moz-transform: rotate("+h+"deg);-webkit-transform: rotate("+h+"deg);-o-transform: rotate("+h+"deg);-ms-transform: rotate("+h+"deg);\" /><img src=\"minute.gif\" style=\"transform: rotate(" + m + "deg);-moz-transform: rotate("+m+"deg);-webkit-transform: rotate("+m+"deg);-o-transform: rotate("+m+"deg);-ms-transform: rotate("+m+"deg);\" /><img src=\"second.gif\" style=\"transform: rotate(" + s + "deg);-moz-transform: rotate("+s+"deg);-webkit-transform: rotate("+s+"deg);-o-transform: rotate("+s+"deg);-ms-transform: rotate("+s+"deg);\" /><img src=\"point.gif\" />";
document.all.clockB.innerHTML =ap +":"+ myMinute +":"+ mySecond;
setTimeout("Clock()",1000);
}
// -->
</script>
</head>
<body onLoad="Clock()">
<p style="text-align:center;">この時計は、IEで表示した場合針が動きません。Firefox3.5以降,Google Chrome,Safari3以降で見てください。</p>
<div class="clock"><img src="clockcap.png" width="205" height="205" /><div class="clockA" id="javaclock"></div>
<span id="clockB" class="clockB"></span></div>
</body>
</html>
画像を使ってアナログ時計で表示できるようにした。ただし、CSSのtransform:rotate();に対応しているブラウザ（Google Chrome1以降,Firefox3.5以降,Safari3以降）でしか見られない。→サンプル