JavaScript常用文檔對象

  1. 設計一個含有表單的頁面,在表單上放入一個文本框,編寫程序,當鼠標在頁面上移動時,鼠標的座標將顯示在這個文本框中。
<!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>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章