开始时间:2021-05-31
复选框全选和取消全选
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复选框全选</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var fisrtChk=document.getElementById("fisrtChk");
var MyHobby=document.getElementsByName("hobby");
//设置全选按钮,直接将全选按钮状态赋值给单个按钮
fisrtChk.onclick=function(){
for(var i=0;i<MyHobby.length;i++){
MyHobby[i].checked=fisrtChk.checked;
}
}
//设置单个按钮都选上时,全选按钮选上
var Num=MyHobby.length;
//设置单个按钮的状态
for(var i=0;i<MyHobby.length;i++){
MyHobby[i].onclick=function(){
//判断逻辑就是,如果选中的个数等于总的按钮个数,那么即勾上全选
var HobbyCount=0;
for(var i=0;i<MyHobby.length;i++){
if(MyHobby[i].checked){
HobbyCount++;
}
}
fisrtChk.checked=(Num==HobbyCount);
}
}
}
</script>
<input type="checkbox" id="fisrtChk"/>
<br>
<input type="checkbox" name="hobby" value="basketball"/>
篮球<br>
<input type="checkbox" name="hobby" value="table tennis"/>
乒乓球<br>
<input type="checkbox" name="hobby" value="football"/>
足球<br>
</body>
</html>
获取下拉列表选中项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>20210601_Test02</title>
</head>
<body>
<script>
window.onload=function(){
var provinceListElt=document.getElementById("provinceList");
provinceListElt.onchange=function(){
alert(this.value);
}
}
</script>
<!--获取选中字段的value值-->
<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">
var nowTime=new Date();
//输出当前时间
document.write(nowTime);
document.write("<br>");
document.write(nowTime.toLocaleString());
//重点:获取毫秒数 从1970年1月1日零时零分开始
var times=nowTime.getTime();
document.write("<br>");
document.write(times);
</script>
<script type="text/javascript">
//点出来之后显示当前时间,再让函数每秒刷新一次,实现自动显示
function displayTime(){
var time=new Date();
var strTime=time.toLocaleString();
document.getElementById("timeDiv").innerHTML=strTime;
}
//定义v的全局变量,用于存放setInterval的返回值,便于后面操作停止时钟
var v;
//每隔一秒钟刷新一次
function start(){
v=window.setInterval("displayTime()",1000);
}
function stop(){
window.clearInterval(v)
}
</script>
<br>
<input type="button" value="显示系统时间" onclick="start();"/>
<input type="button" value="停止系统时间" onclick="stop();"/>
<div id="timeDiv">
</div>
</body>
</html>
内置支持类Array
JavaScript弱类型语言,所以他的列表或者说是数据,更接近于Python中的列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内置Array类</title>
</head>
<body>
<script type="text/javascript">
var arr=[];
alert(arr.length);
var arr2=[1,2,3,false,"ab",3.2];
alert(arr2.length);
//这个时候赋值一个arr[7],再来观察一下结果
arr2[7]="seven";
for(var i=0;i<arr2.length;i++){
document.write(arr2[i]);
document.write(" ");
}
</script>
</body>
</html>
JavaScript数组自动扩容,没有传值的默认为undefined
另一种创建数组的方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内置Array类</title>
</head>
<body>
<script type="text/javascript">
//创建一个空数组
var MyArray=new Array();
//创建一个长度为3的初始值为undefined的数组
var MyArray2=new Array(3);
for(var i=0;i<MyArray2.length;i++){
document.write(MyArray2[i]);
document.write(" ");
}
//创建一个存放初始值为3和2,长度为2的数组
var MyArray3=new Array(3,2);
</script>
</body>
</html>
模拟弹栈和压栈,还可以反转reverse,类似于Python的操作
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>内置Array类</title>
</head>
<body>
<script type="text/javascript">
var a=[1,2,3,4];
var str=a.join("-");
//可以得到结果1-2-3-4 通过join来连接里面的元素
alert(str);
//还可以自动模拟压栈和弹栈
a.push(10);
alert(a);
a.pop();
alert(a);
a.reverse();
alert(a);
</script>
</body>
</html>
结束时间:2021-06-01