【JavaScript】筆記（5）--- DOM（續）（複選框的全選和取消全選；獲取下拉列表選中項的value；網頁時鐘；內建支援類Array）

阿新 • • 發佈：2022-02-09

JavaScript 中內建的支援類：Date，可以用來獲取時間/日期.....

一、複選框的全選和取消全選：

程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>複選框的全選和取消全選</title>
	</head>
	<body>
		<script type="text/javascript">		   
			window.onload = function(){				
				var aihaos = document.getElementsByName("aihao");
				var firstChk = document.getElementById("firstChk");
				
				//註冊第一個複選框的點選事件
				firstChk.onclick = function(){
					for(var i = 0; i < aihaos.length; i++){
						aihaos[i].checked = firstChk.checked;
					}
				}
				
				//大迴圈為所有“aihao”複選框的點選繫結事件
				var all = aihaos.length;
				for(var i = 0; i < aihaos.length; i++){
					aihaos[i].onclick = function(){
						var checkedCount = 0;
						
						//小迴圈用於檢測全選框是否需要勾選
						for(var i = 0; i < aihaos.length; i++){
							if(aihaos[i].checked){
								checkedCount++;
							}
						}
						firstChk.checked = (all == checkedCount);
					}
				}
			}
		</script>
		<input type="checkbox" id="firstChk"/><Br>
		
		<input type="checkbox" name="aihao" value="smoke" />抽菸<Br>
		<input type="checkbox" name="aihao" value="drink" />喝酒<Br>
		<input type="checkbox" name="aihao" value="tt" />燙頭<Br>
	</body>
</html>

二、獲取下拉列表選中項的value：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>獲取下拉列表選中項的value</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var provinceListElt = document.getElementById("provinceList");
				provinceListElt.onchange = function(){
					//模擬獲取選中項的value
					alert(provinceListElt.value);
				}
			}
		</script>
		
		<select id="provinceList">
			<option value="">--請選擇省份--</option>
			<option value="001">河北省</option>
			<option value="002">河南省</option>
			<option value="003">山東省</option>
			<option value="004">山西省</option>
		</select>
	</body>
</html>

三、網頁時鐘：

程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>顯示網頁時鐘</title>
	</head>
	<body>
		<script type="text/javascript">
		   //JS中內建的支援類：Date，可以用來獲取時間/日期。
		   
		   //獲取系統當前時間
		   var nowTime = new Date();
		   
		   //轉換成具有本地語言環境的日期格式.
		   nowTime = nowTime.toLocaleString();
		   document.write(nowTime);
		   
		   //由於在"script"裡所以不能直接<br>
		   document.write("<br>");
		   document.write("<br>");
		   
		   //自定製日期格式:
		   var t = new Date();
		   
		   var year = t.getFullYear(); // 返回年資訊,以全格式返回.
		   
		   var month = t.getMonth(); // 月份是:0-11
		   
		   // var dayOfWeek = t.getDay(); // 獲取的一週的第幾天(0-6)
		   
		   var day = t.getDate(); // 獲取日資訊.
		   
		   document.write(year + "年" + (month+1) + "月" + day + "日");
		   
		   document.write("<br>");
		   document.write("<br>");
		   
		   /*
			重點:怎麼獲取毫秒數？(從1970年1月1日 00:00:00 000到當前系統時間的總毫秒數)
			document.write(new Date().getTime());
		   */
		   
		</script>

		<script type="text/javascript">
			//輸出當前時間
			function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("timeDiv").innerHTML = strTime;
			}
			
			//每隔1秒呼叫displayTime(周期函式)
			function start(){
				// 從這行程式碼執行結束開始,則會不間斷的,每隔1000毫秒呼叫一次displayTime()函式.
				v = window.setInterval("displayTime()", 1000);	
			}
			
			//終止周期函式
			function stop(){
				window.clearInterval(v);
			}
		</script>
		
		<br><br>
		<input type="button" value="顯示系統時間" onclick="start();"/>
		<input type="button" value="系統時間停止" onclick="stop();" />
		
		<div id="timeDiv"></div>
	</body>
</html>

四、內建支援類Array：

程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>內建支援類Array</title>
	</head>
	<body>
		<script type="text/javascript">
			//建立長度為0的陣列
			var arr = [];
			alert(arr.length);
			
			//資料型別隨意
			var arr2 = [1,2,3,false,"abc",3.14];
			alert(arr2.length);
			
			//下標會越界嗎
			arr2[7] = "test"; // 自動擴容.
			
			document.write("<br>");
			
			// 遍歷
			for(var i = 0; i < arr2.length; i++){
				document.write(arr2[i] + "<br>");
			}
			
			// 另一種建立陣列的物件的方式
			var a = new Array();
			alert(a.length); // 0
			
			var a2 = new Array(3); // 3表示長度.
			alert(a2.length);
			
			var a3 = new Array(3,2);
			alert(a3.length); // 2
		   
		   var a = [1,2,3,9];
		   //將陣列中的每個元素取出來,並在每個元素間加上"-",組成一個字串
		   var str = a.join("-");
		   alert(str); // "1-2-3-9"
		   
		   // 在陣列的末尾新增一個元素(陣列長度+1)
		   a.push(10);
		   alert(a.join("-"));
		   
		   // 將陣列末尾的元素彈出(陣列長度-1)
		   var endElt = a.pop();
		   alert(endElt);
		   alert(a.join("-"));
		   
		   // 反轉陣列.
		   a.reverse();
		   alert(a.join("="));
		</script>
	</body>
</html>