1.复选框的全选和取消全选 41
1.1 代码在006 复选框的全选和取消
<!-- 复选框的全选和取消全选 41 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
/* window.onload=function(){
var firstChk = document.getElementById("firstChk");
firstChk.onclick=function(){
// 获取第一个复选框的选中状态(复选框对象checkbox对象)
//alert(firstChk.checked);//这个.checked会返回复选框的选中状态,true或false
//根据name获取所有元素
var aihaos = document.getElementsByName("aihao");
if(firstChk.checked){//如果群选按钮按下即true进入if
//全选
for(var i=0;i<aihaos.length;i++){
aihaos[i].checked=true;//设置将所有复选框选中
}
}else{
//取消全选
for(var i=0;i<aihaos.length;i++){
aihaos[i].checked=false;//设置将所有复选框取消选中
}
}
}
} */
//上面的代码简化写法
window.onload=function(){
var firstChk = document.getElementById("firstChk");
//根据name获取所有元素
var aihaos = document.getElementsByName("aihao");
firstChk.onclick=function(){
// 获取第一个复选框的选中状态(复选框对象checkbox对象)
//alert(firstChk.checked);//这个.checked会返回复选框的选中状态,true或false
for(var i=0;i<aihaos.length;i++){
aihaos[i].checked=firstChk.checked;//设置复选框aihaos[i]是否选中和全选复选框状态挂钩
}
}
//给每个复选框设置onclick
var all = aihaos.length;//复选框总数
//遍历数组
for(var i=0;i<aihaos.length;i++){
aihaos[i].onclick=function(){//给每一个复选框绑定onclick
var checkedCount = 0;//记录选中的复选框数量
//这个for循环需要所有的复选框绑定了onclick才会执行
for(var i=0;i<aihaos.length;i++){//单击任意复选框都会循环确认aihaos[i].checked的值是否被勾选
// 总数量和选中的数量相等的时候,第一个复选框选中.
if(aihaos[i].checked){
checkedCount++;
}
}
// 总数量和选中的数量相等的时候,第一个复选框选中.
/* if(all==checkedCount){
firstChk.checked=true;
}else{
firstChk.checked=false;
} */
//简化写法
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>
2. 获取下拉列表选中项的value 42
2.1 代码在007 获取下拉列表选中项的value
<!-- 获取下拉列表选中项的value 42 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取下拉列表选中项的value</title>
</head>
<body>
<!-- 第一种写法 -->
<!-- onchange事件可以获取value值 -->
<!-- <select onchange="alert(this.value)">
<option value="">--请选择省份--</option>
<option value="001">河南省</option>
<option value="002">河北省</option>
<option value="003">山东省</option>
<option value="004">山西省</option>
</select> -->
<!-- 第二种写法 -->
<script type="text/javascript">
window.onload=function(){
var provinceLisElt = document.getElementById("provinceList")
provinceLisElt.onchange = function(){
//获取选中项的values
alert(provinceLisElt.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>
<!--
省份和市区的关系是：1对多
省份表t_province
id pcode pname
----------------------------
1 001 河北省
2 002 河南省
3 003 山东省
4 004 山西省
市区表t_city
id ccode cname pcode(fk)
----------------------------------------------
1 101 石家庄 001
2 102 保定 001
3 103 邢台 001
4 104 承德 001
5 105 张家口 001
6 106 邯郸 001
7 107 衡水 001
前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
然后将001发送提交给服务器，服务器底层执行一条SQL语句：
select * from t_city where pcode = '001';
返回一个List集合，List<City> cityList;
cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
-->
3. 显示网页时钟 43
获取系统当前时间 var nowTime = new Date();
输出 document.write(nowTime);
转换成具有本地语言环境的日期格式 toLocaleString()
自定制日期格式.
getFullYear();返回年的信息,以全格式getFullYear()返回例如2019年全格式返回就是2019, 不是全格式getYear()返回就是19
getMonth();//返回月份是0-11
getDate();//获取的是一周的第几天即0-6
getDate();//获取日期信息
3.1 周期函数setInterval 43
周期函数setInterval("函数名",毫秒数);
clearInterval(返回值);//停止window.setInterval函数的调用
代码在008 显示网页时钟
<!-- 显示网页时钟 周期函数setInterval 43 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示网页时钟 周期函数setInterval</title>
</head>
<body>
<script type="text/javascript">
/*
关于JS中内置的支持类：Date，可以用来获取时间/日期。
*/
// 获取系统当前时间
var nowTime = new Date();
//输出
document.write(nowTime);
document.write("<br>")//换行
//转换成具有本地语言环境的日期格式.
nowTime = nowTime.toLocaleString();
document.write(nowTime);
document.write("<br>")//换行
document.write("<br>")//换行
// 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
var t = new Date();
//返回年的信息,以全格式getFullYear()返回例如2019年全格式返回就是2019,不是全格式getYear()返回就是19
var year = t.getFullYear();
var month = t.getMonth();//返回月份是0-11
//var dayOfWeek = t.getDate();//获取的是一周的第几天即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到当前系统时间的总毫秒数)
//var times = t.getTime();
//document.write(times);//一般会使用毫秒数当做时间戳(timestamp)
document.write(new Date().getTime());//合为一句
document.write("<br>")//换行
document.write("<br>")//换行
</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毫秒也就是1秒调用一次displayTime()函数
//v接收返回值一个可以传给Window.clearInterval()从而取消对code的周期性执行的值
v = window.setInterval("displayTime()",1000); //周期函数setInterval("函数名",毫秒数);
}
function stop(){
window.clearInterval(v);//停止window.setInterval函数的调用
}
</script>
<input type="button" value="显示系统时间" onclick="start()"/>
<input type="button" value="停止系统时间" onclick="stop()"/>
<div id="timeDiv"></div>
</body>
</html>
4. 内置支持类Array（数组） 44
代码在008 显示网页时钟
<!-- 内置支持类Array 44 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置支持类Array</title>
</head>
<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";//会自动扩容
//遍历
for(var i=0;i<arr2.length;i++){
document.write(arr2[i]+"<br>")
}
//另一种创建数组的对象的方式
var a = new Array();//数组长度是0
alert(a.length);//0
var a2 = new Array(3);//数组长度是3
alert(a2.length);//3
var a3 = new Array(3,2,1,8);//这个代表数组具体的存储的元素
alert(a3.length);//长度是4
var a4=[1,2,3,9];
var str = a4.join("-");//join()可以将数组元素取出来并且用 - 符号连接成字符串
alert(str);//1-2-3-9
//再数组的末尾添加一个元素(数组长度+1)
a4.push(10);
alert(a4.join("-"));//1-2-3-9-10
//将数组末尾元素弹出(数组长度-1)
var endElt = a4.pop();
alert(endElt);//10
alert(a4.join("-"));//1-2-3-9
// 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
// push压栈
// pop弹栈
//反转
a4.reverse();
alert(a4.join("-"));
</script>
</body>
</html>
