5-4 ??程?碼???

Ynw{XbY@qɶ~QAi setTimeout() بơAҦpbUCdҤAAIuhuvAT~|X{@ĵiuFIIIvG

Example]setTimeout01.htm^G

lɮפepUG

lɡ]setTimeout01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>wM{XGw@</h2>
<hr>

<script>
function clickCallback(){
	document.theForm.theButton.value="Tz...";
	setTimeout("alert('FIII'); document.theForm.theButton.value='hu'", 3*1000);
}
</script>

<center>
<form name="theForm">
<input type="button" name=theButton value="hu" onClick="clickCallback()">
</form>
</center>

<hr>
</body>
</html>

ѤWzdҥiAsetTimeout() 榡pUG

timer = setTimeout("JavaScriptROC", ɶ)
yܻALFuɶסvҫwɶ]H1/1000^AsN|hu"JavaScriptROC"vCөҶǦ^XѼ timerAiQΦb clearTimeout() HKѰw{X]Ԩz^C

pGڭ̭nЦabTwɶӰYq{XANN setTimeout() bƸ̭AHOҦƯbSwɶjAЦaIsۤvA]ONO@ӳ²檺dҡAbUCdҤAڭ̤@f𲣥ͤTӶ]OAOܦb檺rB<div> ҤBHεACAdҦpUG

Example]movingText01.htm^G

lɮפepUG

lɡ]movingText01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>]O</h2>
<hr>

<input type=text id=myText1 size=40>
<div id=myText2></div>

<script>
text="e`hAOisQFi̪vvAbڪYy...";
text=text+"@@@@@@@@@@@@@@@@@@";	// [@ǥΪť

function showMovingText(){
	var n = text.length;
	text = text.substr(1, n-1)+text.substr(0, 1);		// NĤ@Ӧrh̫᭱
	document.getElementById("myText1").value = text;	// ]wܤr
	document.getElementById("myText2").innerHTML = text;	// ]w <div> Ҥ
	window.status = text;					// ]wܪAC
	setTimeout("showMovingText()", 400);			// 0.4 {@M
}

showMovingText();
</script>

<hr>
</body>
</html>

bWzdҪ showMovingText() ƤA̫@CO

setTimeout("showMovingText()", 400);
ư즹CɡAiOҦb 0.4 AƤS|QIs@A̦A]]OrA|bj 0.4 N|Qs@Ct~ACsɡAڭ̨ϥ substr() ӱNĤ@ӦrhrꪺݡApзhANiHF]OĪGC

Hint
substr() M substring() ϥΡAAܤ@UGpG text = "@OdUe"Ah
  • text.substr(3,5)|Ǧ^ "dUe"]3Ӧr}lA5Ӧr^
  • text.substring(3,5)|Ǧ^ "dU"]3Ӧr}lA4Ӧr^

Hint
ϥ setTimeout() ӤЩIs@ӨơAäNOƪjIsAЪ`No̪tC

Hint
id M name ݩʦb JavaScript ΪkǤPGid NܼƤ@ˡAib JavaScript iHIsAOϥ document.getElementById("id ҭ") ӱoF name NܼơA~ݤAg DOM qWUAҦp document.theForm.theButton C

Ynw{XAi clearTimeout()AҦpG

Example]setTimeout02.htm^G

lɮפepUG

lɡ]setTimeout02.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>w{XGwP</h2>
<hr>

<script>
timeStep=0.1;	// C 0.1 ܤ@ɶ
accumulated=0;	// ثe֭pɶ
function showTime(){
	document.getElementById("theText").value=accumulated;
	accumulated+=timeStep;
	timer=setTimeout("showTime();", timeStep*1000);
}

function clickCallback(){
	switch(document.getElementById("theButton").value){
		case "}lp":
			document.getElementById("theButton").value="p";
			accumulated=0;					// ɶks
			showTime();					// }lp
			break;
		case "p":
			document.getElementById("theButton").value="}lp";
			clearTimeout(timer);				// p
			break;
		default:
			alert("Error!");
			break;
	}
}
</script>

<center>
<form>
<input type="button" id=theButton value="}lp" onClick="clickCallback()">
<input type="text" id=theText>
</form>
</center>

<hr>
</body>
</html>

WzdҦӭIG

  1. YUu}lpɡvAڭ̨ϥΡutimer=setTimeout("showTime();", timeStep*1000);vӹw showTime() bC 0.1 @C
  2. YUupɡvAhڭ̨ϥΡuclearTimeout(timer);vӨwgw{XC
ϥ setTimeout() M clearTimeout()Aڭ̥iHĦauƥXʡv JavaScript i²䧹㪺ɶC

ѩuа@q{XvOܭn\A]Fϥ setTimeout() ~AJavaScript S䴩t@Ө setInterval()AiHFۦP\AbϥΤW²CsetInterval() 榡pUG

timer = setInterval("JavaScriptROC", ɶ)
yܻACjuɶסvҫwɶ]H1/1000^AsN|hu"JavaScriptROC"vAөҶǦ^XѼ timer iQΦb clearInterval() HKѰw{X]Ԩz^Cڭ̬ݬݥ setInterval() ҲͪYɧsɶܡG

Example]setInterval01.htm^G

lɮפepUG

lɡ]setInterval01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>w{XGϥ setInterval()</h2>
<hr>

<script>
function showTime(){
	date=new Date();
	document.getElementById("theText").value=date.toLocaleString();
}
setInterval("showTime()", 1000);		//C@s@
</script>

<center>
<form>
ثeɶG<input type="text" id=theText size=30>
</form>
</center>

<hr>
</body>
</html>

YnɶܡAiHϥ clearInterval()AШUCdҡG

Example]clearInterval01.htm^G

lɮפepUG

lɡ]clearInterval01.htm^G]ǦϰUYi^
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>wP{XGϥ setInterval() M clearInterval()</h2>
<hr>

<script>
function showTime(){
	date=new Date();
	document.getElementById("theText").value=date.toLocaleString();
}
clock=setInterval("showTime()", 1000);		//C@s@
</script>

<center>
<form>
ثeɶG<input type="text" id=theText size=30>
<input type=button name=controlButton value="" onClick="clearInterval(clock)">
</form>
</center>

<hr>
</body>
</html>

WzdҥuO@²dҡAҥHA@ɶܡANSkA_ADsJC


JavaScript {]pPΡGΩΤ