WEB阶段_JS篇（回调函数，附代码笔记）

已于 2023-07-16 15:11:25 修改
阅读量279 收藏
点赞数
分类专栏： Java-WEB阶段 文章标签： javascript 前端 笔记
于 2023-07-14 10:48:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52479647/article/details/131717451
版权

【注意】：

demo1.css

h1{
	color:yellow;
	font-size: 80px;
}

check.js

//	alert("hello")
		function checkForm(){
			//获得文本框的值，通过标签的id	
			var username = document.getElementById("username").value;
	//				var val = username.value; //获得文本框的值，通过value是该标签的值，用链式表达式如上
	//				alert(username);
			if(username == ""){
				alert("用户名不能为空");
				return false;//表示form表单那里提交不了
			}
			
			// 校验密码：
			var password = document.getElementById("password").value;
			if(password == ""){
				alert("密码不能为空");
				return false;
			}
			
			// 校验确认密码:
			var repassword = document.getElementById("repassword").value;
			if(repassword != password){
				alert("两次密码输入不一致！");
				return false;
			}
			
			// 校验邮箱:
			var email = document.getElementById("email").value;//email代表输入的值
			// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
			// str.match("正则表达式");  正则.test("字符串");
			
			//若email不等于/.../的内容，那么就是错误的
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){   //day08截图有解释，//表示开始和结束（作为字符串形式），^表示字符串开始位置，匹配字母数字_-任意个，匹配@符号....
				alert("邮箱格式不正确！");
				return false;
			}
			
		}

（一）、案例一：使用JS完成图片滚动效果

回调函数：

window.onload = function(){} 是将一个匿名函数作为window.onload事件的回调函数，当页面加载完成时，该匿名函数会被执行。

而Window.setTimeout() 函数则是用来设置一个定时器，在指定的时间后执行回调函数。其中第一个参数可以是一个预编译的函数，如下面代码的“changeImg()”，也可以是一个匿名函数function(){....}。例如，可以这样使用setTimeout的匿名函数回调：Window.setTimeout(function(){}, 100)。这意味着在100毫秒后，该匿名函数会被执行。

1、window对象的一个定时操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function a(){
//				window.setInterval("alert('aaa')",5000);//表示每隔五秒执行一次，周期性的
				window.setTimeout("alert('bbb')",5000);//表示五秒后执行一次，但是只有一次，非周期循环性
		
			}
		
		</script>

	</head>
	
	<body onload="a()">
			
		
	</body>
</html>

2、案例一：使用JS完成图片滚动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			#bodyDiv{
				border:1px solid blue;
				width:100%;
			}
			
			.logoDiv{
				border:1px solid lightpink;
				width:33%;
				float:left;
				height:50px;
			}
			
			.clear{
				clear:both;
			}
			
			#menuDiv{
				width:100%;
				height:50px;
				border:1px solid yellow;
				background-color: black;
			}
			
			#menuDiv a{
				font-size: 17px;
				color: white;
			}
			
			#imgDiv{
				width:100%;
				border:1px solid blue;
			}
			
			
			.productClass{
				width:100%;
				border:1px solid yellow;
			}
			.contentClass{
				width:100%;
				border:1px solid red;
			}
			.contentClass font{
				font-size: 30px;
				color: black;
				
			}
		</style>
		
		<script>
			window.onload = function(){
				//window.setInterval(alert('aaa'),5000);//表示每隔五秒执行一次，周期性的
				//window.setTimeout(alert('bbb'),5000);//表示五秒后执行一次，但是只有一次，非周期循环性
				
				// 设置定时：
				window.setInterval("changeImg()",5000);
			}
		 	var i = 1;
			function changeImg(){
				i++;
				// 获得图片的控制权：
				if(i > 3){
					i=1;
				}
				var img1 = document.getElementById("img1");
				img1.src="../img/"+i+".jpg";
			}
		</script>
	</head>
	
	<body>
		<!-- 整体的DIV -->
		<div id="bodyDiv">
			<!-- logo的DIV -->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="48">
				</div>
				<div class="logoDiv">
					<img src="../img/header.png" height="48">
				</div>
				<div class="logoDiv">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">购物车</a>
				</div>
				
			</div>	
			<!--logodiv全部向左浮动后清除浮动，便于往后的div的正常运行-->
			<div class="clear"></div>
			
			<!-- 导航栏Menu的DIV -->
			<div id="menuDiv">
				<a href="">首页</a>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</div>	
			
				
			<!-- 导航栏下方图片滚动的DIV -->
			<div id="imgDiv">
				<img id="img1" src="../img/1.jpg" width="100%">
			</div>	
			
			<!-- 热门商品的DIV -->
			<div class="productClass">
				<!-- 文字+图片部分的DIV -->
				<div class="contentClass">
					<font>热门商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV ，先分出两个div往左浮动，这样就分成了两列-->
				<div style="width:100%;border:1px solid yellow;">
					<!--第一列为手机占两行那个-->
					<div style="width:15%;height: 460px;border:1px solid yellow;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					<!--然后将第二列的分成两行，搞两个不设置浮动的div即可，-->
					<div style="width:84%;height: 460px;border:1px solid yellow;float:left;">
						<div >
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<!--<div class="logoDiv"></div>-->
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			
			<!--热门商品下方的 广告的DIV -->
			<div style="width:100%;border:1px solid blue;">
				 <img src="../img/ad.jpg" width="100%" height="80">
			</div>	
			
			<!-- 最新商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>最新商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 页脚的DIV -->
			<div  style="width:100%;border:1px solid blue;">
				<img src="../img/footer.jpg" width="100%">
			</div>	
			<!-- 友情链接及版权的DIV -->
			<div style="width:100%;border:1px solid blue;">
				<center>
					
					
					    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
					
					Copyright © 2008-2030 老韩商城 版权所有 
				</center>
			</div>	
		</div>
	</body>
</html>

（二）、案例二：使用JS弹出广告

1、JS的BOM对象一

在打开新窗口时，name参数用于设置新窗口的名称。这个名称可以在后续的代码中被引用，以便对新窗口进行操作。通过设置一个特定的名称，可以确保新窗口被唯一标识，以方便其他代码对其进行控制或操作。对于指定name为“百度”，则表示新窗口的名称为“百度”，其他代码可以使用这个名称来引用或操作该窗口。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function del(){
				var flag = confirm("你确定删除？");
				alert(flag);
			}
			function edit(){
				prompt("请输入商品的价格","333.33");
			}
			function openWindow(){
				open("http://www.baidu.com","name为百度","width=600,height=600");
			}
		</script>
	</head>
	<body>
		02-HTML<br />
		
		<input type="button" value="删除" onclick="del()" />
		
		<input type="button" value="编辑" onclick="edit()" />
		
		<input type="button" value="打开" onclick="openWindow()" />
		
		<a href="03-JS的BOM对象二.html">链接</a>
	</body>
</html>

2、JS的BOM对象二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
//				alert(window.navigator.appName);
				alert(window.screen.width);  //1536
			}
			
			function priPage(){
//				history.back();//返回上一个页面
				history.go(-1);//返回上一个页面
			}
			
			function nextPage(){
				history.forward();//往前走一个页面
//				history.go(1);执行不了，往前走不了，一般实际只需要返回时用go,如果是往前的话用链接形式即可！！！！
			}
			
			function jump(){
				location.href="04-JS的BOM对象三.html";
			}
			
		</script>
		
	</head>
	<body>
		03-HTML（处于中间的页面）
		<a href="04-JS的BOM对象三.html">链接</a>
		<br />
		
		<input type="button" value="返回上一个网页" onclick="priPage()"/>

		<input type="button" value="返回下一个网页" onclick="nextPage()"/>
		
		<br />
		<input type="button" value="跳转" onclick="jump()" />

	</body>
</html>

3、JS的BOM对象三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload = function(){
//				alert(window.navigator.appName);
				alert(window.screen.width);  //1536
			}
		</script>
		
	</head>
	<body>
		04-HTML
		
	</body>
</html>

4、案例二：使用JS定时弹出广告

或使用window.setTimeout("show()",5000);与window.setTimeout("hide()",5000);也可以！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			#bodyDiv{
				border:1px solid blue;
				width:100%;
			}
			
			.logoDiv{
				border:1px solid lightpink;
				width:33%;
				float:left;
				height:50px;
			}
			
			.clear{
				clear:both;
			}
			
			#menuDiv{
				width:100%;
				height:50px;
				border:1px solid yellow;
				background-color: black;
			}
			
			#menuDiv a{
				font-size: 17px;
				color: white;
			}
			
			#imgDiv{
				width:100%;
				border:1px solid blue;
			}
			
			
			.productClass{
				width:100%;
				border:1px solid yellow;
			}
			.contentClass{
				width:100%;
				border:1px solid red;
			}
			.contentClass font{
				font-size: 30px;
				color: black;
				
			}
		</style>
		
		<script>
			var time;
			//广告是需要取消的，并非持续的（如同滚动般一直被调用），所以在广告显示和隐藏的方法中需要设置清除setInterval的方法！
			//滚动图片不需要取消，所以不需要调用取消方法，让他周期性的一直调用即可！
			window.onload = function(){
				// 设置定时滚动图片：
				window.setInterval("changeImg()",5000);//一直让他周期性
				//设置广告显示
				time = window.setInterval("show()",5000);//不能一直周期性
				
			}
			//图片滚动
		 	var i = 1;
			function changeImg(){
				i++;
				// 获得图片的控制权：
				if(i > 3){
					i=1;
				}
				var img1 = document.getElementById("img1");
				img1.src="../img/"+i+".jpg";
			}
			
			// 显示广告的方法
			function show(){
				// 获得广告的div元素:
				var adDiv = document.getElementById("adDiv");
				adDiv.style.display = "block";
				window.clearInterval(time);//取消周期性方法，不取消就每隔n秒重刷一遍广告
				time = window.setInterval("hide()",5000);
			}
			
			// 隐藏广告的方法:
			function hide(){
				// 获得广告的div元素:
				var adDiv = document.getElementById("adDiv");
				adDiv.style.display="none";
				window.clearInterval(time);//取消周期性方法，不取消就每隔n秒重新隐藏一遍广告
			}

			
			
			
		</script>
	</head>
	
	<body>
		<!-- 整体的DIV -->
		<div id="bodyDiv">
			<div id="adDiv" style="width: 100%; display: none;">
				<img src="../img/loginbg.jpg" width="100%" height="500px">
			</div>
			<!-- logo的DIV -->
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="48">
				</div>
				<div class="logoDiv">
					<img src="../img/header.png" height="48">
				</div>
				<div class="logoDiv">
					<a href="">登录</a>
					<a href="">注册</a>
					<a href="">购物车</a>
				</div>
				
			</div>	
			<!--logodiv全部向左浮动后清除浮动，便于往后的div的正常运行-->
			<div class="clear"></div>
			
			<!-- 导航栏Menu的DIV -->
			<div id="menuDiv">
				<a href="">首页</a>&nbsp;&nbsp;
				<a href="">电脑办公</a>&nbsp;&nbsp;
				<a href="">手机数码</a>&nbsp;&nbsp;
				<a href="">烟酒糖茶</a>&nbsp;&nbsp;
			</div>	
			
				
			<!-- 导航栏下方图片滚动的DIV -->
			<div id="imgDiv">
				<img id="img1" src="../img/1.jpg" width="100%">
			</div>	
			
			<!-- 热门商品的DIV -->
			<div class="productClass">
				<!-- 文字+图片部分的DIV -->
				<div class="contentClass">
					<font>热门商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV ，先分出两个div往左浮动，这样就分成了两列-->
				<div style="width:100%;border:1px solid yellow;">
					<!--第一列为手机占两行那个-->
					<div style="width:15%;height: 460px;border:1px solid yellow;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					<!--然后将第二列的分成两行，搞两个不设置浮动的div即可，-->
					<div style="width:84%;height: 460px;border:1px solid yellow;float:left;">
						<div >
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						<!--<div class="logoDiv"></div>-->
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			
			<!--热门商品下方的 广告的DIV -->
			<div style="width:100%;border:1px solid blue;">
				 <img src="../img/ad.jpg" width="100%" height="80">
			</div>	
			
			<!-- 最新商品的DIV -->
			<div class="productClass">
				<!-- 文字部分的DIV -->
				<div class="contentClass">
					<font>最新商品</font><img src="../img/title2.jpg">
				</div>
				<!-- 商品部分的DIV -->
				<div style="width:100%;border:1px solid blue;">
					<div style="width:15%;height: 460px;border:1px solid blue;float:left;">
						<img src="../img/big01.jpg" width="100%" height="100%">
					</div>
					
					<div style="width:84%;height: 460px;border:1px solid blue;float:left;">
						<div>
							<div style="border:1px solid blue;width:48%;float:left;height:228px;">
								<img src="../img/middle01.jpg" width="100%" height="100%">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
						
						<div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
							<div style="border:1px solid blue;width:16%;float:left;height:228px;">
								<img src="../img/small03.jpg">
							</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- 页脚的DIV -->
			<div  style="width:100%;border:1px solid blue;">
				<img src="../img/footer.jpg" width="100%">
			</div>	
			<!-- 友情链接及版权的DIV -->
			<div style="width:100%;border:1px solid blue;">
				<center>
					
					
					    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
					
					Copyright © 2008-2030 老韩商城 版权所有 
				</center>
			</div>	
		</div>
	</body>
</html>

（三）、使用JS完成表单的提示和校验

1、使用JS完成注册页面的提示和校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			div{
				border:1px solid blue;
			}
			
			#bodyDiv{
				width: 100%;
			}
			
			#bodyDiv > div{
				width: 100%;
			}
			
			.logoDiv{
				width: 33%;
				height: 50px;
				float: left;
			}
			
			.clear{
				clear: both;
			}
			
			ul li{
				display: inline;
				color: white;
			}
			
			#bodyDiv a:link{   /*起初效果*/
				color: yellow;
			}
			#bodyDiv a:visited{  /*访问过后效果*/
				color: red;
			}
			#bodyDiv a:hover{   /*鼠标移动到链接时效果*/
				color: greenyellow;
				font-size: 20px;
			}
			#bodyDiv a:active{  /*鼠标摁住链接时效果*/
				color: black;
				font-size: 50px;
			}
		</style>
		
		<script>
		   /*function tips(){
				//获得span元素
				document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名需要是字母或者数字组成！</font>";
				
			}
			
			function checkUsername(){
				//获得span元素
				document.getElementById("usernameSpan").innerHTML="<font color='greenyellow'>用户名可以使用！</font>";
				
			}*/
			
			
			function tips(id,content){
				document.getElementById(id+"Span").innerHTML="<font color='red'>" +content+ "</font>"
			}
			
			function checkForm(){
				// 判断用户名不能为空:
				var username = document.getElementById("username").value;
				if(username == ""){
					document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";
					return false;
				}
				
				var password = document.getElementById("password").value;
				if(password == ""){
					document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
					return false;
				}
			}

			
		</script>
		
	</head>
		
	
	<body>
	
		
		<!--整体div-->
		<div id="bodyDiv">
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="100%"/>
				</div>
				<div class="logoDiv">
					<img src="../img/header.jpg" height="100%"/>
				</div>
				<div class="logoDiv" style="height:35px; padding-top: 15px;" >
					<a href="#">登录1</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
				<div class="clear"></div>  <!-- 未设置浮动时，若宽度设置的好，虽然文字和图片不能代替之前的位置，但是背景颜色可以，所以保险起见还是要设置-->
			</div>
			
			<div style="height: 50px;background: lightskyblue; color: red; font-size:20px ;display: block; ">
				<ul>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</div>
			
			<div style="height: 420px;background-image: url(../img/regist_bg.jpg)">
				<div style="border: 5px solid gray;background-color: white; position:absolute; left:450px;top: 150px;width: 600px ;">
					<form action="../案例二：使用JS定时弹出广告/案例二：使用JS定时弹出广告.html" method="get" onsubmit="return checkForm()">
						<table border="0" cellpadding="10">
							<tr>
								<td>用户名</td>
								<td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要字母或者数字组成！')"><span id="usernameSpan"></span></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input type="password" id="password" name="password" onfocus="tips('password','密码至少六位！')"><span id="passwordSpan"></span></td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td><input type="password" id="repassword" name="repassword"></td>
							</tr>
							<tr>
								<td>性别</td>
								<td><input type="radio" name="sex" value="男" checked="checked">男
									<input type="radio" name="sex" value="女">女</td>
								
							</tr>
							<tr>
								<td>籍贯</td>
								<td>
									<select name="province">
										<option>--请选择--</option>
										<!--<option value="广东" selected="selected">广东</option>
										<option value="广西">广西</option>
										<option value="云南">云南</option>-->
									</select>
									<select name="city">
										<option>--请选择--</option>
										<!--<option value="广东">广东</option>
										<option value="广西" selected="selected">广西</option>
										<option value="云南">云南</option>-->
									</select>
								</td>
							</tr>
							<tr>
								<td>爱好</td>
								<td>
									<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
									<input type="checkbox" name="hobby" value="足球">足球
									<input type="checkbox" name="hobby" value="排球">排球
									<input type="checkbox" name="hobby" value="羽毛球">羽毛球
									<input type="checkbox" name="hobby" value="蛋球" checked="checked">蛋球
								</td>
							</tr>
							<tr>
								<td>邮箱</td>
								<td><input type="text" id="email" name="email"></td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="注册"></td>
							</tr>
							
						</table>
					</form>
				</div>
			</div>
			
			<div>
				<img src="../img/ad.jpg" width="100%" height="80px"/>
			</div>
			
			
			
		</div>
		
		
		
	</body>
</html>

（四）、使用JS完成表格的隔行换色

1、data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//这个有弊端，就是标题也被渲染颜色了
	/*		function changeColor(){
				//获得操作对象的控制权
				var tab1 = document.getElementById("tab1");
				//获得表格所有行数
				var count = tab1.rows.length;
				//遍历每行
				for(var i=0;i<count;i++){
					if(i%2==0){
						//偶数行
						tab1.rows[i].style.backgroundColor="red";
					}else{
						//奇数行
						tab1.rows[i].style.backgroundColor="greenyellow";
						
					}
				}
			}*/
			
			//改进弊端，将标题用thead分开
			function changeColor(){
				//获得要操作的表格的控制权
				var tab1 = document.getElementById("tab1");
				//获得tbody中的所有行(一个表格中有多个tbody,tbody[0]表示获取第一个tbody！)
				var len = tab1.tBodies[0].rows.length;
				alert(len)
				//遍历
				for(var i =0;i<len;i++){  //细节从0开始，就是从标题开始算
					if(i%2==0){
						//偶数行
						tab1.tBodies[0].rows[i].style.backgroundColor = "greenyellow";
					}else{
						//奇数行
						tab1.tBodies[0].rows[i].style.backgroundColor = "pink";
					}
					
				}
			}
			
		</script>
		
	</head>
	<body onload="changeColor()">
		<table id="tab1" border="1" width="80%" align="center">
			<thead>
			<tr>
				<th>分类的ID</th>
				<th>分类的名称</th>
				<th>分类的描述</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>烟酒糖茶</td>
				<td>烟酒糖茶</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
				<tr>
				<td>4</td>
				<td>衣服包包</td>
				<td>烟酒糖茶</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
				<tr>
				<td>5</td>
				<td>汽车用品</td>
				<td>烟酒糖茶</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			</tbody>	
		</table>
	</body>
</html>

2、left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--点击链接，打开页面到right部分-->
		<h3><a href="data.html" target="right">分类管理</a></h3>
		<h3><a href="#">商品管理</a></h3>
		<h3><a href="#">订单管理</a></h3>
	</body>
</html>

3、right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎，欢迎，热烈欢迎~！</h1>
	</body>
</html>

4、top

 &lt是小于；&gt是大于

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<center><h1>欢迎来到黑马商城</h1></center>
		<a href="data.html">数据 a &lt; 6</a>
		<a href="data.html">数据 a &rsaquo; 10</a>	
	</body>
</html>

5、案例四：网站后台页面的显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--第一个分成两行，第一行占百分15，第二行占其余-->
	<frameset rows="15%,*">
		<!--这是第一行的内容，使用<frame>标签，frame代表切分的每个部分，引入top.html的内容.-->
		<frame  src="top.html" name="top"/>
		<!--这是第二行的内容，又嵌套一个框架标签，因为第一个框架标签已经表明分成两行了，所以即使没有frame标签，也应该知道第二个frame标签就是变成一个框架了!!-->
		<frameset cols="15%,*">
			<!--第二行的第一列，占15，引入left.html的内容-->
			<frame  src="left.html" name="left"/>
			<!--第二行的第二列，占85，引入right.html的内容-->
			<frame  src="right.html" name="right"/>
		</frameset>
	</frameset>
</html>

（五）、使用JS完成复选框的全选和全不选

1、data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//这个有弊端，就是标题也被渲染颜色了
	/*		function changeColor(){
				//获得操作对象的控制权
				var tab1 = document.getElementById("tab1");
				//获得表格所有行数
				var count = tab1.rows.length;
				//遍历每行
				for(var i=0;i<count;i++){
					if(i%2==0){
						//偶数行
						tab1.rows[i].style.backgroundColor="red";
					}else{
						//奇数行
						tab1.rows[i].style.backgroundColor="greenyellow";
						
					}
				}
			}*/
			
			//改进弊端，将标题用thead分开
			function changeColor(){
				//获得要操作的表格的控制权
				var tab1 = document.getElementById("tab1");
				//获得tbody中的所有行(一个表格中有多个tbody,tbody[0]表示获取第一个tbody！)
				var len = tab1.tBodies[0].rows.length;
				alert(len)
				//遍历
				for(var i =0;i<len;i++){  //细节从0开始，就是从标题开始算
					if(i%2==0){
						//偶数行
						tab1.tBodies[0].rows[i].style.backgroundColor = "greenyellow";
					}else{
						//奇数行
						tab1.tBodies[0].rows[i].style.backgroundColor = "pink";
					}
					
				}
			}
			
			
			function checkAll(){
				//获得上面的复选框
				var selectAll = document.getElementById("selectAll");
				
				//判断复选框是否被选中
				var ids = document.getElementsByName("ids");
				if(selectAll.checked == true){
					//上面的复选框被选中，获得下面的所有复选框，修改checked属性
					for(var i = 0;i<ids.length;i++){
						ids[i].checked = true;
					}	
				}else{
					//上面的复选框没有被选中
					for(var i = 0;i<ids.length;i++){
						ids[i].checked = false;
					}
				}
			}
			
		</script>
		
	</head>
	<body onload="changeColor()">
		<table id="tab1" border="1" width="80%" align="center">
			<thead>
				<tr>
					<td colspan="5">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()"/></th>
					<th>分类的ID</th>
					<th>分类的名称</th>
					<th>分类的描述</th>
					<th>操作</th>
					
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><input type="checkbox" name="ids"/></th>
					<td>1</td>
					<td>手机数码</td>
					<td>手机数码</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<th><input type="checkbox" name="ids"/></th>
					<td>2</td>
					<td>电脑办公</td>
					<td>电脑办公</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<th><input type="checkbox" name="ids"/></th>
					<td>3</td>
					<td>烟酒糖茶</td>
					<td>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
					
				<tr>
					<th><input type="checkbox" name="ids"/></th>
					<td>4</td>
					<td>衣服包包</td>
					<td>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<th><input type="checkbox" name="ids"/></th>
					<td>5</td>
					<td>汽车用品</td>
					<td>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
			</tbody>	
		</table>
	</body>
</html>

2、left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--点击链接，打开页面到right部分-->
		<h3><a href="data.html" target="right">分类管理</a></h3>
		<h3><a href="#">商品管理</a></h3>
		<h3><a href="#">订单管理</a></h3>
	</body>
</html>

3、right

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>欢迎，欢迎，热烈欢迎~！</h1>
	</body>
</html>

4、top

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<center><h1>欢迎来到黑马商城</h1></center>
		<a href="data.html">数据 a &lt; 6</a>
		<a href="data.html">数据 a &rsaquo; 10</a>	
	</body>
</html>

5、案例五：网站的后台页面的显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--第一个分成两行，第一行占百分15，第二行占其余-->
	<frameset rows="15%,*">
		<!--这是第一行的内容，使用<frame>标签，frame代表切分的每个部分，引入top.html的内容.-->
		<frame  src="top.html" name="top"/>
		<!--这是第二行的内容，又嵌套一个框架标签，因为第一个框架标签已经表明分成两行了，所以即使没有frame标签，也应该知道第二个frame标签就是变成一个框架了!!-->
		<frameset cols="15%,*">
			<!--第二行的第一列，占15，引入left.html的内容-->
			<frame  src="left.html" name="left"/>
			<!--第二行的第二列，占85，引入right.html的内容-->
			<frame  src="right.html" name="right"/>
		</frameset>
	</frameset>
</html>

（六）、使用JS完成省市二级联动效果

1、DOM对象的操作一

创标签-创文本-文本如标签-标签再入标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function addElement(){
				var city = document.getElementById("city");
				// 创建一个元素:
				var liEl = document.createElement("li");
				// 创建一个文本节点:
				var text = document.createTextNode("深圳");
				// 添加子节点:先将深圳放入li标签（元素）
				liEl.appendChild(text);
				//再讲li标签放入 city变量，即ul的id,即放入ul标签！
				city.appendChild(liEl);
			}
		</script>	

	</head>
	<body>
		
		<input type="button" value="添加元素" onclick="addElement()" />
		<ul id="city">
			<li>上海</li>
			<li>北京</li>
		</ul>
	</body>
</html>

2、JS的全局函数

这段代码是将给定的URL字符串进行编码，返回编码后的结果。编码是指将URL中的特殊字符转换为表示该字符的十六进制ASCII码，并在其前面加上"%"符号。encodeURI()函数只对URL中的非字母数字字符进行编码，而不会对整个URL进行编码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var url = "http://localhost:8080/day03?username=aa a&password=张三";
			
			var uri1 = encodeURI(url);
			alert(uri1);
		</script>
	</head>
	<body>
	</body>
</html>

3、案例六：使用JS完成省市的二级联动的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<style>
			div{
				border:1px solid blue;
			}
			
			#bodyDiv{
				width: 100%;
			}
			
			#bodyDiv > div{
				width: 100%;
			}
			
			.logoDiv{
				width: 33%;
				height: 50px;
				float: left;
			}
			
			.clear{
				clear: both;
			}
			
			ul li{
				display: inline;
				color: white;
			}
			
			#bodyDiv a:link{   /*起初效果*/
				color: yellow;
			}
			#bodyDiv a:visited{  /*访问过后效果*/
				color: red;
			}
			#bodyDiv a:hover{   /*鼠标移动到链接时效果*/
				color: greenyellow;
				font-size: 20px;
			}
			#bodyDiv a:active{  /*鼠标摁住链接时效果*/
				color: black;
				font-size: 50px;
			}
		</style>
		
		<script>
		   /*function tips(){
				//获得span元素
				document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名需要是字母或者数字组成！</font>";
				
			}
			
			function checkUsername(){
				//获得span元素
				document.getElementById("usernameSpan").innerHTML="<font color='greenyellow'>用户名可以使用！</font>";
				
			}*/
			
			
			function tips(id,content){
				document.getElementById(id+"Span").innerHTML="<font color='red'>" +content+ "</font>"
			}
			
			function checkForm(){
				// 判断用户名不能为空:
				var username = document.getElementById("username").value;
				if(username == ""){
					document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";
					return false;
				}
				
				var password = document.getElementById("password").value;
				if(password == ""){
					document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";
					return false;
				}
			}

			// 定义数组：二维数组：分别是五个省份，每个省份有对应的城市
			var arrs = new Array(5);
			arrs[0] = new Array("广东-杭州市","绍兴市","温州市","义乌市","嘉兴市");
			arrs[1] = new Array("广西-南京市","苏州市","扬州市","无锡市");
			arrs[2] = new Array("云南-武汉市","襄阳市","荆州市","宜昌市","恩施");
			arrs[3] = new Array("江苏-石家庄市","唐山市","保定市","邢台市","廊坊市");
			arrs[4] = new Array("浙江-长春市","吉林市","四平市","延边市");

			function changeCity(value){
				//获取选中的省份信息
//				alert(value);
				var city = document.getElementById("city");
				
				// 清除之前选过的省份对应城市列表中的内容:5个元素，长度5，从4开始减，到1停止，保留了请选择这个索引为0的元素
				for(var i=city.options.length-1;i>0;i--){
					city.options[i] = null;
				}

				// city.options.length = 0;//直接将--请选择--也删除了！
				
				for(var i= 0 ;i< arrs.length;i++){
					if(value == i){  //通过对应的省份的value值，对应数组中省份的索引值！
						// 获得所有的市的信息.
						for(var j=0;j<arrs[i].length;j++){
							// alert(arrs[i][j]);
							// 创建元素：
							var opEl = document.createElement("option");// <option></option>
							// 创建文本节点:在之前创建的二维数组中的城市那边的值中
							var textNode = document.createTextNode(arrs[i][j]);
							// 将文本的内容添加到option元素中.，将城市加入对应的省份。appendChild(node) - 插入新的子节点（元素）
							opEl.appendChild(textNode);
							// 将option的元素添加到城市列表中.通过id找到城市标签，然后加入即可。appendChild(node) - 插入新的子节点（元素）
							city.appendChild(opEl);
						}
					}
				}

			}
			
		</script>
		
	</head>
		
	
	<body>
	
		
		<!--整体div-->
		<div id="bodyDiv">
			<div>
				<div class="logoDiv">
					<img src="../img/logo2.png" height="100%"/>
				</div>
				<div class="logoDiv">
					<img src="../img/header.jpg" height="100%"/>
				</div>
				<div class="logoDiv" style="height:35px; padding-top: 15px;" >
					<a href="#">登录1</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
				<div class="clear"></div>  <!-- 未设置浮动时，若宽度设置的好，虽然文字和图片不能代替之前的位置，但是背景颜色可以，所以保险起见还是要设置-->
			</div>
			
			<div style="height: 50px;background: lightskyblue; color: red; font-size:20px ;display: block; ">
				<ul>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</div>
			
			<div style="height: 420px;background-image: url(../img/regist_bg.jpg)">
				<div style="border: 5px solid gray;background-color: white; position:absolute; left:450px;top: 150px;width: 600px ;">
					<form action="../案例二：使用JS定时弹出广告/案例二：使用JS定时弹出广告.html" method="get" onsubmit="return checkForm()">
						<table border="0" cellpadding="10">
							<tr>
								<td>用户名</td>
								<td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要字母或者数字组成！')"><span id="usernameSpan"></span></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input type="password" id="password" name="password" onfocus="tips('password','密码至少六位！')"><span id="passwordSpan"></span></td>
							</tr>
							<tr>
								<td>确认密码</td>
								<td><input type="password" id="repassword" name="repassword"></td>
							</tr>
							<tr>
								<td>性别</td>
								<td><input type="radio" name="sex" value="男" checked="checked">男
									<input type="radio" name="sex" value="女">女</td>
								
							</tr>
							<tr>
								<td>籍贯</td>
								<td>
									<select name="province" id="province" onchange="changeCity(this.value)">
										<option value="">--请选择（省）--</option>
										<option value="0">广东省</option>
										<option value="1">广西省</option>
										<option value="2">云南省</option>
										<option value="3">江苏省</option>
										<option value="4">浙江省</option>
									</select>
									<select name="city" id="city">
										<option>--请选择（市）--</option>
										
									</select>
								</td>
							</tr>
							<tr>
								<td>爱好</td>
								<td>
									<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
									<input type="checkbox" name="hobby" value="足球">足球
									<input type="checkbox" name="hobby" value="排球">排球
									<input type="checkbox" name="hobby" value="羽毛球">羽毛球
									<input type="checkbox" name="hobby" value="蛋球" checked="checked">蛋球
								</td>
							</tr>
							<tr>
								<td>邮箱</td>
								<td><input type="text" id="email" name="email"></td>
							</tr>
							<tr>
								<td colspan="2"><input type="submit" value="注册"></td>
							</tr>
							
						</table>
					</form>
				</div>
			</div>
			
			<div>
				<img src="../img/ad.jpg" width="100%" height="80px"/>
			</div>
			
			
			
		</div>
		
		
		
	</body>
</html>

QuitXIN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中回调函数的学习笔记
12-12
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了，下面本文章把我在学习回调函数例子给各位同学介绍一下吧，有需了解的同学不防进入参考。 回调函数原理： 我现在出发，到了通知你” 这是一个异步的流程，“我出发”这个过程中（函数执行），“你”可以去做任何事，“到了”（函数执行完毕）“通知你”（回调）进行之后的流程 例子 1.基本方法 [removed] function doSomething(callback) { // … // Call the callback callback('stuf
JavaScript回调函数
weixin_52629158的博客
04-22 356
javascript回调函数：把一个函数做为另一个函数的参数，当调用这个参数的时候，这个函数就叫做回调函数。调用一个函数b的时候把一个函数a当做参数传入，由b在特定的条件下触发a函数，a就是回调函数。回调函数中设置条件，条件不成立，回调函数终止。通过函数的指针来调用函数。
小程序的 生命周期回调函数onLoad，onReady，onShow
dxj124的博客
07-19 4559
onLoad: 只触发一次，页面加载时触发，从二级页面回来时不会触发(使用navigateBack()回跳是可以重新执行onLoad)，以及tabBar首次会执行onload，第二次进入onload不会执行。（可以传递参数） onShow: 当小程序启动，或从后台进入前台显示，会触发 onShow, 从二级页面回来时也会触发。（不能传参数） onReady：页面初次渲染完成时触发。一个页面只...
WebAPIs:事件、环境对象、回调函数
2301_76534754的博客
12-26 621
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数作出响应，也称为 绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。鼠标事件：鼠标触发、click鼠标点击、mouseenter鼠标经过、mouseleave鼠标离开。元素对象.addEventListener('事件类型',要执行的函数)事件源.addEventListener(事件，事件处理函数)事件源：那个dom元素被事件触发了，要获取dom元素。文本事件（表单输入触发）：input用户输入事件。
js函数的回调
aabbyyz的博客
10-22 650
分享一下我老师大神的人工智能教程！http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！ 平常的前端开发工作中，编写js时会有很多地方用到函数的回调。 最简单的例子就是： &lt;script language="javascript" type="text/javascript"&gt;function doS...
自定义alert，并添加回调函数
木一番的博客
09-16 3302
需求：一些自定义的alert只是简单的页面效果，不能做到中断js，有了回调函数后，自定义的弹出窗点击之后，就能执行回调函数了。在一些登录场景很有用，登陆失败后，alert弹出失败信息，之后跳转到指定页面。 弹出窗效果 js代码 //重写alert window.alert = alert; function alert(data, callback) { //回调函数 var alert_bg = document.createElement('div');
js回调函数的理解
weixin_30275415的博客
09-26 371
js回调函数(callback)理解 Mark!讲之前说一句 function say(){ alert(,,,,,,,,) } var say=function (){ alert(,,,,,,,) } var say=()=>{ alert(,,,,,,,) }他们3个是一模一样的 只是写法不一样一个是普通方法 ...
jQuery学习笔记之回调函数
11-22
1.回调函数定义 回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接...
应用笔记LAT1241+浅谈STM32库里的回调函数
最新发布
04-02
有人对 STM32 固件库里的回调函数有些好奇甚至纠结，这里简单介绍下。其实从用法及功能上讲他们并没有什么特别的，跟其它函数一样，也是实现特定功能的代码段。一般来讲，所谓回调函数，泛指基于事件触发而被调用...
js模拟Confirm、alert弹框,可以修改文字颜色。
07-19
可以直接调用，操作方便，调用代码如下： jConfirm('Can you confirm this，<span am red.?', 'Confirmation Dialog', function(r) { });
自定义window.alert对话框JS代码
05-15
非常不错的JS特效。一个自定义样式的alert弹出对话框。比系统默认的美观许多。
JavaScript学习笔记_js常用函数封装_js包.zip
11-04
JavaScript学习笔记_js常用函数封装_js包 gulp scss 模块化开发 github常用命令
回调函数 ⭐⭐⭐
车明强的博客
10-15 208
函数的参数可以 是任意的数据类型 参数传递对象 function fn(a){ //var a = {uname:"tom"}; console.log(a.uname);//把参数以对象的方式使用 } fn({uname:"tom"}); 参数传递一个数组 function fn(a){ console.log(a[0]); } fn([4,3,5])
alert点击确定触发方法
热门推荐
黄都伟
07-03 4万+
alert点击确定触发方法
JS实现回调例子
weixin_34013044的博客
06-28 759
function f_2(id){return -id;}// func即回调函数function f_1(id,func){id++;id=func(id);return id;}function f_3(){var id=f_1(1,f_2);alert(id);}f_3(); 转载于:https://www.cnblogs.com/Spring/archive/2007/08/...
LVGL 色环回调函数
08-24
LVGL的色环回调函数可以通过以下步骤来实现： 1. 在创建色环控件时，可以使用`lv_arc_set_end_cb()`函数来设置回调函数。该函数需要传入一个回调函数指针作为参数，并且回调函数的定义需要遵循特定的格式。 2. 回...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值