一.浏览器对象模型(BOM)
1.函数的定义
<!--普通函数定义-->
function add(a,b){
console.log(a+b);
}
add(44,99);
<!--匿名函数定义-->
function(参数列表){
js逻辑代码
}
几个JavaScript案例展示
1.定时弹出图片(定时弹广告)
<!DOCTYPE html>
<html>
<!-- 每隔三秒钟弹出一张图片(定时弹广告) -->
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var imgID = document.getElementById("imgID");
setInterval(function(){
imgID.style.display="block";
},3000);
setInterval(function(){
imgID.style.display="none";
},6000);
}
</script>
</head>
<body>
<div id="imgID" style="display: none;">
<img src="../img/3.jpg" />
</div>
</body>
</html>
2.轮播图效果
<!DOCTYPE html>
<html>
<!--轮播的三张图片分别是:1.jpg,2.jpg,3.jpg -->
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var imgId= document.getElementById("imgId");
var i=2;
window.setInterval(function(){
imgId.src="../img/"+i+".jpg";
i++;
if (i>3) {
i=1;
}
},3000)
}
</script>
</head>
<body>
<img id="imgId" src="../img/1.jpg" />
</body>
</html>
3.省市联动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 定义二维数组:存储省市信息
var pros = [
["深圳","黄州","广州"],["济南","青岛","烟台"],["保定","雄安","石家庄"]
];
function selectCity(value){
var cityIds = document.getElementById("cityId");
console.log(cityIds);
if (value=="") {
cityIds.innerHTML="<option>----请-选-择-市----</option>";
return;
}
var city=pros[value];
var str="";
for (var i = 0; i < city.length; i++) {
str+="<option>"+city[i]+"</option>";
}
cityIds.innerHTML=str;
}
</script>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="../index.html" >
<table width="600" height="350px">
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">广东省</option>
<option value="1">山东省</option>
<option value="2">河北省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>