003JavaScript

最新推荐文章于 2024-09-19 21:36:17 发布

一个射手座程序猿

最新推荐文章于 2024-09-19 21:36:17 发布

阅读量102

点赞数

分类专栏： Java-Web

本文链接：https://blog.youkuaiyun.com/weixin_40440225/article/details/96479768

版权

Java-Web 专栏收录该内容

4 篇文章

订阅专栏

一.浏览器对象模型(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>