綜合應用實例介紹
綜合應用實例介紹
綜合應用實例介紹 Part I
範例一：
自動換頁程式
<HTML>
<HEAD>
<TITLE>自動換頁</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=big5">
<STYLE Type="text/css">
<!--
#script_div1{font-size:"16pt";font-family:"Comic Sans MS";color:"green"}
#script_div2{font-size:"20pt";font-family:"Comic Sans MS";color:"blue"}
-->
</STYLE>
<Script>
<!--
function transfer()
{
window.location.href="back_page.htm";
}
-->
</Script>
</HEAD>
<BODY onLoad="setTimeout('transfer()',5000)">
<CENTER>
<P id="script_div1">這個網頁會自動在五秒之後連結到下列網頁。<BR>
如果你要直接跳到下一頁，請點一下下面的網址。<BR><BR>
<A HREF="back_page.htm"><FONT id="script_div2">Go to page.htm</FONT></A>
<P></CENTER>
</BODY>
</HTML>
回上一頁程式：
<HTML>
<HEAD>
<TITLE>回上一頁</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=big5">
<STYLE Type="text/css">
<!--
#script_div1{font-size:"16pt";font-family:"Comic Sans MS";color:"green"}
#script_div2{font-size:"16pt";font-family:"Comic Sans MS";color:"blue"}
-->
</Script>
</HEAD>
<BODY>
<CENTER>
<P id="script_div1">只要點選下面的"<span id="script_div2">回上一頁</span>"
選項，就會自動回到上一頁。<BR>
<P id="script_div2"><a href="Javascript:history.go(-1)">回上一頁</a>
</CENTER>
</BODY>
</HTML>
看範例一執行的結果：
範例二：
Web 計算機程式
<HTML>
<HEAD>
<TITLE>Web 計算機</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=big5">
<Script language="Javascript">
<!--
function do_it(ar)
{
ar.answer.value=eval(ar.answer.value);
if (ar.answer.value=="undefined")
{
ar.answer.value="";
}
if (ar.answer.value=="NaN" || ar.answer.value=="Infinity")
{
ar.answer.value="";
alert("You can't divide a number by zero.");
}
}
function erase(ar)
{
ar.answer.value="";
}
function return_it(ar,string)
{
ar.answer.value+=string;
if (ar.answer.value=="*")
ar.answer.value="";
if (ar.answer.value=="+")
ar.answer.value="";
if (ar.answer.value=="/")
ar.answer.value="";
}
var decimalpoint='.'
var add_it='+'
var subtract_it='-'
var multiply_it='*'
var divide_it='/'
function about()
{
alert("Web Calculator by Anaeng Chio !!");
}
function viewSource()
{
alert("\nA text file with source will be loaded to the full window.\n\n
Use your browser BACK button to return to the examples.");
top.window.location.href="js-calc.txt";
}
-->
</Script>
</HEAD>
<BODY>
<CENTER><STRONG>
<FONT COLOR=#AA0000>Web 計算機</FONT>
<BR>
<form name="calculator">
<table border=8 cellspacing=4 cellpadding=2%>
<tr>
<td align="center" colspan="5" bgcolor="CC9999">
<b>Web Calculator</b>
</td>
</tr>
<tr>
<td align="center" colspan="5" bgcolor="FFFF66">
<input type="text" name="answer" size="18" maxlength="20"
value="" action="do(this.form)">
</td>
</tr>
<tr>
<td bgcolor="0000FF">
<input type="button" value=" 1 " onClick="return_it(this.form,1)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 2 " onClick="return_it(this.form,2)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 3 " onClick="return_it(this.form,3)">
</td>
<td bgcolor="FF0000">
<input type="button" value=" + " onClick="return_it(this.form,add_it)">
</td>
<td bgcolor="00FF00">
<input type="button" value=" ? " onClick="about()">
</td>
</tr>
<tr>
<td bgcolor="0000FF">
<input type="button" value=" 4 " onClick="return_it(this.form,4)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 5 " onClick="return_it(this.form,5)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 6 " onClick="return_it(this.form,6)">
</td>
<td bgcolor="FF0000">
<input type="button" value=" - " onClick="return_it(this.form,subtract_it)">
</td>
</tr>
<tr>
<td bgcolor="0000FF">
<input type="button" value=" 7 " onClick="return_it(this.form,7)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 8 " onClick="return_it(this.form,8)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" 9 " onClick="return_it(this.form,9)">
</td>
<td bgcolor="FF0000">
<input type="button" value=" * " onClick="return_it(this.form,multiply_it)">
</td>
<td bgcolor="000000">
<input type="button" value=" C " onClick="erase(this.form)">
</td>
</tr>
<tr>
<td align="center" colspan="2" bgcolor="0000FF">
<input type="button" value=" 0 " onClick="return_it(this.form,0)">
</td>
<td bgcolor="0000FF">
<input type="button" value=" . " onClick="return_it(this.form,decimalpoint)">
</td>
<td bgcolor="FF0000">
<input type="button" value=" / " onClick="return_it(this.form,divide_it)">
</td>
<td bgcolor="000000">
<input type="button" value=" = " onClick="do_it(this.form)">
</td>
</tr>
</table>
</form>
</CENTER>
</BODY>
</HTML>
看範例二執行的結果：
範例三：
可轉換時制的時鐘程式
<HTML>
<HEAD>
<TITLE>可轉換時制的時鐘</TITLE>
<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=big5">
<STYLE Type="text/css">
<!--
#script_div1{font-size:"16pt";font-family:"Comic Sans MS";color:"blue"}
#script_div2{font-size:"20pt";font-family:"Comic Sans MS";color:"green"}
#script_div3{font-size:"24pt";font-family:"Comic Sans MS";color:"fuchsia"}
-->
</STYLE>
<Script language="Javascript">
<!--
function showMilitaryTime()
{
if (document.form.showMilitary[0].checked)
{
return true;
}
return false;
}
function showTheHours(theHour)
{
if (showMilitaryTime() || (theHour > 0 && theHour < 13))
{
return (theHour);
}
if (theHour == 0)
{
return (12);
}
return (theHour-12);
}
function showZeroFilled(inValue)
{
if (inValue > 9)
{
return "" + inValue;
}
return "0" + inValue;
}
function showAmPm()
{
if (showMilitaryTime())
{
return ("");
}
if (now.getHours() < 12)
{
return (" am");
}
return (" pm");
}
function showTheTime()
{
now = new Date
document.form.showTime.value = showTheHours(now.getHours()) + ":"
+ showZeroFilled(now.getMinutes()) + ":" +
showZeroFilled(now.getSeconds()) + showAmPm()
setTimeout("showTheTime()",1000)
}
-->
</Script>
</HEAD>
<BODY onLoad="showTheTime()">
<CENTER>
<P id="script_div2">這是一個普通時鐘，點選下面不同的項目，<BR>
可以切換12時制或是24時制。</P><BR><BR>
<form name=form>
<input type=text name=showTime size=11><BR>
<input type=radio name=showMilitary checked>24 Hour Time<BR>
<input type=radio name=showMilitary>12 Hour Time<BR>
</form>
</CENTER>
</BODY>
</HTML>
看範例三執行的結果：