第六章代码课堂练习

最新推荐文章于 2023-11-12 12:57:56 发布

qq_43366068

最新推荐文章于 2023-11-12 12:57:56 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/qq_43366068/article/details/103172229

版权

6.8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"  src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn").click(function(){
					if($("#testInput").val()!=""){
						alert($("#testInput").val());
					
					$("#testInput").attr("disabled","disabled");
				} else {
					alert("请输入吧!");
					$("#testInput").focus();
					return false;
				}
			});
			$("#dbtn").click(function(){
				if($("#testInput").attr("disabled")==="disabled"){
					$("#testInput").removeAttr("disabled");
				}
			});
			})
		</script>
	</head>
	<body>
		用户名：<input  type="text" name="testInput" id="testInput" /><br/><br/>
		       <input type="submit" name="vbtn" id="nbtn" value="提交" /> &nbsp;
		       <input type="button" name="dbtn" id="dbtn" value="修改" /> 
		
	</body>
</html>

6.9

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<title>制作一个高度可变的评论框</title>
<style>
.message{
	width:320px;
	font-size:12px;
	border:1px solid #000000;
}
.tt{
	padding:5px;
}
.msg_top{
	margin-top:5px;
}
#bigBtn{
	margin-left:180px;
	font-size:10px;
}
#smallBtn{
	margin-left:5px;
	font-size:10px;
}
#content{
	overflow:hidden;
}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		var $content = $("#content");   // 获取文本域对象
		$("#bigBtn").click(function(){  // 放大按钮单击事件
			if(!$content.is(":animated")){    // 是否处于动画中
				if($content.height() < 350){
					// 将文本域高度在原来的基础上增加70
					$content.animate({height:"+=70"},500);
				}
			}
		})
		$("#smallBtn").click(function(){ // 缩小按钮单击事件
		if(!$content.is(":animated")){   // 是否处于动画中
			if($content.height() > 70){
				// 将文本域高度在原来的基础上减少70
				$content.animate({height:"-=70"},500);
			}
		}
		})
	})
</script>

</head>

<body>
<div class="message">
	<div class="msg_top">
		<input type="button" value="放大" id="bigBtn"/>&nbsp;&nbsp;<input type="button" value="缩小" id="smallBtn"/>
	</div>
	<div class="tt">
		<textarea id="content" rows="4" cols="35">明日编程词典系列软件是由近百位软件开发专业人士联手打造，国内第一部为编程开发人员研制的编程专业软件。
		</textarea>
	</div>
</div>
</body>
</html>

6.10

<!DOCTYPE html>
<html>
<head>
<metacharset=utf-8">
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<title>控制评论框的滚动条</title>
<style>
.message{
	width:320px;
	font-size:12px;
	border:1px solid #000000;
}
.tt{
	padding:5px;
}
.msg_top{
	margin-top:5px;
}
#bigBtn{
	margin-left:180px;
	font-size:10px;
}
#smallBtn{
	margin-left:5px;
	font-size:10px;
}

</style>
<script type="text/javascript">
	$(document).ready(function(){
		var $content = $("#content");   
		$("#upBtn").click(function(){  
			if(!$content.is(":animated")){    
				if($content.height() < 350){
					$content.animate({scrollTop:"-=40"},500);
				}
			}
		})
		$("#downBtn").click(function(){ 
		if(!$content.is(":animated")){   
			if($content.height() > 40){
				$content.animate({scrollTop:"+=40"},500);
			}
		}
		})
	})
</script>

</head>

<body>
<div class="message">
	<div class="msg_top">
		<input type="button" value="向上" id="upBtn"/>&nbsp;&nbsp;<input type="button" value="向下" id="downBtn"/>
	</div>
	<div class="tt">
		<textarea id="content" rows="4" cols="35">明日编程词典系列软件是由近百位软件开发专业人士联手打造，国内第一部为编程开发人员研制的编程专业软件。汇聚十多年软件开发经验和专业文档积累；提供价值百万的超值源代码；内置强大的智能搜索引擎，可以实现从文档到源代码的高效检索；包括技术文档、实例、项目、源码、视频、界面图片等海量开发资源，全方位解决开发人员的开发难题。
		</textarea>
	</div>
</div>
</body>
</html>

6.11

<!DOCTYPE html>
<html>
<head>
<metacharset=gb2312" />
<title>表单页面</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$("#bbtn").click(function(){
		$("input[type=radio]").eq(0).attr("checked",true);
	})
	$("#gbtn").click(function(){
		$("input[type=radio]").eq(1).attr("checked",true);
	})
})
</script>
</head>

<body>
<h3>选择你喜欢吃的水果</h3>
<input type="radio" name="fruit" value="香蕉" />香蕉
<input type="radio" name="fruit" value="葡萄" />葡萄<br/>
<input type="button" id="bbtn" value="香蕉" />&nbsp;<input type="button" id="gbtn" value="葡萄" />
</body>
</html>

6.12

<!DOCTYPE html>
<html>
<head>
<meta charset=gb2312" />
<title>控制复选框的全选、全不选和反选</title>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
	$("#checkAll").click(function(){
		$("input[type=checkbox]").attr("checked",true);
	})
	$("#unCheckAll").click(function(){
		$("input[type=checkbox]").removeAttr("checked");
	})
	
	$("#revBtn").click(function(){
		$("input[type=checkbox]").each(function(){
			this.checked = !this.checked;
		});
	})
	$("#subBtn").click(function(){
		var msg = "你喜欢的运动是：\r\n";
		$("input[type=checkbox]:checked").each(function(){
			msg+=$(this).val()+"\r\n";
		});
		alert(msg);
	})
})
</script>
</head>

<body>
<form>
<h3 align="center">选择你喜欢的运动</h3>
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="滑冰">滑冰
<input type="checkbox" name="hobby" value="滑雪">滑雪
<input type="checkbox" name="hobby" value="乒乓球">乒乓球<br/><br/>
<input type="button" id="checkAll" value="全选">&nbsp;<input type="button" id="unCheckAll" value="全不选">&nbsp;
<input type="button" id="revBtn" value="反选">&nbsp;<input type="button" id="subBtn" value="提交">&nbsp;
</form>
</body>
</html>

qq_43366068

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六章代码课堂练习

6.8<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>...
复制链接

扫一扫