- 設計一個含有表單的頁面，在表單上放入一個文本框，編寫程序，當鼠標在頁面上移動時，鼠標的座標將顯示在這個文本框中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form" method="post">
座標(x,y)<input type="text" size="20" name="mouseposition"/>
</form>
<script type="text/javascript">
document.onmousemove=function(){
var x=window.event.clientX;
var y=window.event.clientY;
form.mouseposition.value=x+","+y;
}
</script>
</body>
</html>
2. 應用appendChild()方法和getElementById()方法實現年月日的聯動的功能。當改變“年”菜單和“月”菜單的值的時候，“日”菜單的值的範圍也會相應的改變。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年月日的聯動</title>
</head>
<body>
<script type="text/javascript">
function append(d,v){
var option=document.createElement("option");//創建元素option
option.value=v;//把參數v作爲元素的值
option.innerText=v+"日";//把參數v作爲元素的顯示內容
d.appendChild(option);//把元素option作爲參數d的子節點
}
function getday(){
var y=form1.year.value;//取得年份的值
var m=form1.month.value;//取得月份的值
var d=document.getElementById("day");//定位到id=day的節點
d.innerHTML="";//把id=day節點的內容清空
if(m==4 || m==6 || m==9 || m==11){//如果月份的值是4或6或9或11
for(j=1;j<=30;j++){
append(d,j);//把1到30循環加到天數當中
}
}else if(m==2){//如果月份的值是2
if(y%4==0 || y%400==0 && y%100!=0){//如果年份是閏年
for(j=1;j<=29;j++){
append(d,j);//把1到29循環加到天數當中
}
}else{
for(j=1;j<=28;j++){
append(d,j);//不是閏年就把1到28循環加到天數當中
}
}
}else{//否則如果月份的值是1或3或5或7或8或10或12
for(j=1;j<=31;j++){
append(d,j);//把1到31循環加到天數當中
}
}
}
</script>
<form id="form1" name="form1" method="post" action="">
<select name="year" id="year" onchange="getday()">
<script type="text/javascript">
var mydate=new Date();
for(i=1990;i<=mydate.getFullYear();i++){
document.write("<option value='"+i+"' "+(i==1986?"selected":"")+">"+i+"年</option>");
}
</script>
</select>
<select name="month" id="month" onchange="getday()">
<script type="text/javascript">
for(i=1;i<=12;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"月</option>");
}
</script>
</select>
<select name="day" id="day">
<script type="text/javascript">
for(i=1;i<=31;i++){
document.write("<option value='"+i+"' "+(i==1?"selected":"")+">"+i+"日</option>");
}
</script>
</select>
</form>
</body>
</html>
3. 使用Window對象的setTimeout()方法和clearTimeout()方法設置一個簡單的計時器，當單擊“開始計時”按鈕後啓動計時器，輸入框會從0開始進行計時，單擊“暫停計時”後可以暫停計時。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var flag=0;
var timeID;
function beg(){
var i=form1.num.value;
i++;
form1.num.value=i;
timeID=setTimeout("beg()",1000);
}
function sta(){
if(flag==0){
beg();
flag=1;
}
}
function pau(){
clearTimeout(timeID);
flag=0;
}
</script>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="num" size="1" value="0" />
<input type="button" name="start" value="開始計時" onclick="sta();" />
<input type="button" name="pause" value="暫停計時" onclick="pau();" />
</form>
</body>
</html>
