【JavaScript】筆記（5）--- DOM（續）（復選框的全選和取消全選；獲取下拉串列選中項的value；網頁時鐘；內置支持類Array）-有解無憂

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

代碼：

<!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="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/smoke" />抽煙<Br>
		<input type="checkbox" name="aihao" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/drink" />喝酒<Br>
		<input type="checkbox" name="aihao" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/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="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/001">河北省</option>
			<option value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/002">河南省</option>
			<option value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/003">山東省</option>
			<option value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/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="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/顯示系統時間" onclick="start();"/>
		<input type="button" value="https://www.cnblogs.com/Burning-youth/archive/2022/02/08/系統時間停止" 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/423545.html

標籤：其他

上一篇：增刪商品計算價格

下一篇：vue開發小技巧