JavaScript笔记--- DOM(续)(复选框的全选和取消全选;获取下拉列表选中项的value;网页时钟;内置支持类Array)

Posted 猿头猿脑的王狗蛋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript笔记--- DOM(续)(复选框的全选和取消全选;获取下拉列表选中项的value;网页时钟;内置支持类Array)相关的知识,希望对你有一定的参考价值。

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>

以上是关于JavaScript笔记--- DOM(续)(复选框的全选和取消全选;获取下拉列表选中项的value;网页时钟;内置支持类Array)的主要内容,如果未能解决你的问题,请参考以下文章

《JavaScript高级程序设计(第四版)》学习笔记第3章(续)

《JavaScript高级程序设计(第四版)》学习笔记第3章(续)

DOM操作复选框

JavaScript 系列笔记——DOM(贰)

JavaScript笔记--- ECMAScript(续) (JS事件;JS代码的执行顺序;设置节点属性;捕捉回车键;void 运算符;JS中的控制语句)

Javascript-DOM笔记