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章（续）
JavaScript笔记--- ECMAScript(续) (JS事件；JS代码的执行顺序；设置节点属性；捕捉回车键；void 运算符；JS中的控制语句)