javaWeb技术第二篇之CSS、事件和案例

<!--内联式
CSS (层叠样式表) 编辑
层叠样式表(英文全称:Cascading Style Sheets)
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
就是网页的美化技术。
入门:如何在html里面使用css
html里面的外观命名跟css外观命名会有所有不同。但效果一致
css属性:
属性1:值1;属性2:值2;属性3:值3;...
内联式:对每个元素都进行style进行样式添加.
内部式:在当前html的head的style标签里面添加
<head>
	<style>
		查找元素{//css属性}
	</style>
</head>
外部式:要求大家敲明白
<head>
	<link rel="stylesheet" type="text/css" href="css/out.css"/>
	固定写法:rel="stylesheet" type="text/css"  前者是当作一个样式文件,后者是当作css代码
</head>
-->
		<input type="text" value="内联式" style="background-color: yellow ;" /><br />
		<input type="text" value="内联式" style="background-color: yellow ;" />
		<div >
			我是div
		</div>
		<div >
			我是div
		</div>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*对每一个option进行外观设置*/
			option{
				min-width: 200px;
			}
		</style>
	</head>
	<body>
	<!--css能做到html做不到外观设置,可以更简洁高效-->
        <select size="3"  >
        	<option>小班</option>
        	<option>中班</option>
        	<option>大班</option>
        </select>

	</body>

</html>

选择器最终目的就是为了拿到指定的元素对象.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			/*选择器就是一些选择html元素的符号*/
			/*#id{//css属性}*/
			#input1{ background-color: blue;}
			/*.class值{//css属性 }*/
			.inp{background-color: yellow;}
			/*名称元素选择器:使用标签名,表示对当前页面的每个元素*/
			div{background-color: red;}
			/*虽然有的元素名称一样,这时不要用名称选择器*/
			/*元素[属性='值']{//css代码}*/
			/*input[type='password']{background-color: green;}*/
			/*扩展:分组选择器,包含选择器
			 外部元素选择器  内部元素选择器{//css代码}*/
			div span{background-color: orange;}
			/*分组选择器是一种共用样式的写法 简化css代码
			 选择器1,选择器2...{//css代码}*/
			/*input[type='text']{background-color: green;}*/
			/*input[type='password'],input[type='text']{background-color: green;}*/
			#pwd,#txt{background-color: green;}
		</style>
	</head>
	<body>
		<!--id 是元素的唯一编码
		可以根据id查找出当前文档的html元素
		一般是js里面使用的属性
		根据class进行元素查找-->
         <input id="input1" value="id选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <input id="pwd" type="password" /><br />
         <input id="txt" type="text" /><br />
         <div>
         	<span>我是div内部的span</span>
         </div>
         <span>我是div外部的span</span>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*对每一个div进行操作*/
			div {
				/*设置字体颜色*/
				color: red;
				/*设置字体大小*/
				font-size: 20px;
				/*设置粗细*/
				font-weight: 700;
				/*设置对齐*/
				text-align: center;
			}
			a {
				/*设置删除 下划线 上划线*/
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!--<i><font color="red" size="6" face="黑体">我是王宝强</font></i>
		<i><font color="red" size="6" face="黑体">我是马蓉</font></i>-->
		<div>我是王宝强</div>
		<div>我是马蓉</div>
		<a href="#">我是宋jj</a>
		<a href="#">我是宋kk</a>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				background-color: gray;
			}
			#div1{
				background-image: url(img/015.jpg);
				/*设置宽高*/
				height: 400px;
				width: 400px;
			}
		</style>
	</head>
	<body>
		<div>我是div</div>
		<div>我是div</div>
		<div id="div1">我是div</div>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				/*border:宽度  形状 颜色;
				 solid实线
				 dotted虚线*/
				/*border: 2px solid  red;*/
				border-top: 2px solid red;
				border-right: 2px dotted red;
				border-bottom: 5px dotted red;
				border-left: 5px dotted green;
			}
		</style>
	</head>
	<body>
		<div>我是div</div>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span {
				border: 1px solid red;
				background-color: green;
				/*缩进(内边距):内容与边界的距离*/
				/*padding: 10px;*/
				/*上,右,下,左*/
				/*使用空格隔开*/
				padding: 10px 20px 30px 40px;
				/*外边距:边界与边界的距离*/
				/*上,右,下,左*/
				margin: 20px;
			}
		</style>
	</head>

	<body>
		<br />
		<span>我是span</span>
		<span id="second">我是span</span>
		<span id="third">我是span</span>

	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*设置元素在界面的中的位置
			 摆放元素就是布局
			 标准流/普通流:默认的显示顺序,先上后下 先左后右 碰到div换行
			 float:浮动 不显示在标准上面,而有自己的一层,该层在标准流上面
			 left:向左浮动
			 right:向右浮动
			 clear:清除浮动:不让左边,右边,同时左右出现浮动
			 display*/

			#div1 {
				width: 150px;
				height: 150px;
				background-color: red;
				float: right;
			}

			#div2 {
				width: 50px;
				height: 50px;
				background-color: green;
				float: right;
			}

			#div3 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: right;
			}

			#clear {
				width: 0px;
				height: 0px;
				background-color: orange;
				/*项目中使用both最多
				 当我们给clear为both设置宽高为0,0
				 当它与div一块使用可以替代table*/
				clear: both;
			}
		</style>
	</head>

	<body>
		<div id="div1"></div>
		<div id="clear"></div>
		<div id="div2"></div>

		<div id="div3"></div>

	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.grid{
				width: 60px;
				height: 60px;
				border: 1px solid gray;
				float: left;
			}
			/*换行*/
			#clear{
				clear: both;
				width: 0px;
				height: 0px;
			}

		</style>
	</head>

	<body>
		<div class="grid">1</div>
		<div class="grid">2</div>
		<div class="grid">3</div>
		<div id="clear"></div>
		<div class="grid">4</div>
		<div class="grid">5</div>
		<div class="grid">6</div>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/*将元素设置成内联元素/行内元素
				 此时宽高失效*/
				display: inline;
			}
			span{
				border: 1px solid red;
				/*将元素设置成块级元素*/
				display: block;
				width: 100px;
				height: 100px;
				/*将元素隐藏*/
				/*display: none;*/
				/*应用场景:菜单*/
			}
		</style>
	</head>

	<body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.grid{
				width: 60px;
				height: 60px;
				border: 1px solid gray;
				float: left;
			}
			/*换行*/
			#clear{
				clear: both;
				width: 0px;
				height: 0px;
			}

		</style>
	</head>

	<body>
		<div class="grid">1</div>
		<div class="grid">2</div>
		<div class="grid">3</div>
		<div id="clear"></div>
		<div class="grid">4</div>
		<div class="grid">5</div>
		<div class="grid">6</div>
	</body>

</html>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/*将元素设置成内联元素/行内元素
				 此时宽高失效*/
				display: inline;
			}
			span{
				border: 1px solid red;
				/*将元素设置成块级元素*/
				display: block;
				width: 100px;
				height: 100px;
				/*将元素隐藏*/
				/*display: none;*/
				/*应用场景:菜单*/
			}
		</style>
	</head>

	<body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#outer{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			#inner{
				border: 1px solid grey;
				width: 50px;
				height: 50px;
				/*0设置上下 auto由外部计算居中的外边距*/
				margin: 0 auto;
			}
		</style>
	</head>

	<body>
          <div id="outer">
          	<div id="inner"></div>
          </div>
	</body>

</html>



<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*每一个div设置宽 边框*/
			div{
			 width: 100%;
			 /*border: 1px solid gray;*/
			 float: left;
			}
			/*清除+宽高为00等于br*/
			#clear{
				height: 0px;
				width: 0px;
				clear: both;
			}
			/*第一行内的三个div,是包含关系*/
			#head div{
				width: 33%;
				text-align: center;
				height: 60px;
			}
			#head div a{
				margin: 10px;
				text-decoration: none;
			}
			#head #head_div{
				/*设置内边距*/
		     padding-top: 20px;
			}
			/*第二行开始*/
			#menu{
				height: 40px;
				background-color: black;
				padding-top: 10px;
			}
			#menu a{
				color: white;
				text-decoration: none;
				font-size: 20px;
				margin-left: 10px;
				/*如果margin元效可以使用padding*/
			}
			/*第三行开始*/
			#register{
				width: 100%;
				background-image: url(img/015.jpg);
				height: 700px;
			}
			#register #form_div{
				background-color: white;
				border: 2px solid gray;
				width: 60%;
				height: 70%;
				/*上 右 下 左*/
                margin: 5%  20% 0% 20%;
			}
			#register #form_div table{
				margin: 0 auto;
				padding-top: 20px;
			}
			/*第四行*/
			#footer {

			}
			#footer img{
                  width: 100%;
			}
			/*第五行*/
			p {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<!--联想
		列点
		*创建表格(div+float+clear)
		*css 操作元素外观
		* 第一行
		* 第二行
		* 。。。。
		实现-->
		<div id="head">
			<!--1/3宽度的div-->
			<div >
				<img src="img/logo2.png" />
			</div>
			<div >
				<img src="img/header.jpg" />
			</div>
			<div id="head_div">
				<a href="#">注册</a><a href="#">登录</a><a href="#">关于</a>
			</div>
		</div>
		<div id="clear"></div>

		<!--第二行 菜单-->
		<div id="menu">
			<a href="#">首页</a>
			<a href="#">笔记</a>
			<a href="#">手机</a>
		</div>
		<div id="clear"></div>
		<!--第三行 注册部分-->
		<div id="register">
			<div id="form_div">
                    <!--用户注册-start-->
                    <!-- *表单:集合-->
		<form action="#" method="post">

			<!--*表单元素-->
			<!--*使用table标签-->
			<table width="70%" border="0px">
				<tr>
					<td align="right" >
						<font color="blue">会员注册</font>
					</td>
					<td align="left" colspan="2">USER REGISTER</td>
				</tr>
				<!--*text-->
				<tr>
					<td align="right"><b>用户名</b></font>
					</td>
					<td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用户名"/></td>
				</tr>
				<!--*password-->
				<tr>
					<td align="right"><b>密码</b></font>
					</td>
					<td align="left" colspan="2"><input type="password" name="password" size="50" /></td>
				</tr>
				<tr>
					<td align="right"><b>确认密码</b></font>
					</td>
					<td align="left" colspan="2"><input type="password" name="password2" size="50" /></td>
				</tr>
				<tr>
					<td align="right"><b>Email</b></font>
					</td>
					<td align="left" colspan="2"><input type="text" name="email" size="50" /></td>
				</tr>
				<tr>
					<td align="right"><b>姓名</b></font>
					</td>
					<td align="left" colspan="2"><input type="text" name="uname" size="50" /></td>
				</tr>

				<!--*radio-->
				<tr>
					<td align="right"><b>性别</b></font>
					</td>
					<td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
				</tr>

				<!--*date-->
				<tr>
					<td align="right"><b>出生日期</b></font>
					</td>
					<td align="left" colspan="2"><input type="date" name="birthday" /></td>
				</tr>
				<!--*image-->
				<tr>
					<td align="right"><b>验证码</b></font>
					</td>
					<td align="left" width="33%"><input type="text" name="code" width="100" /></td>
					<td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td>
				</tr>
				<!--*submit-->
				<tr>
					<td colspan="3" align="center">
						<input type="submit" value="注册" width="200px" />
					</td>
				</tr>
			</table>
		</form>
                    <!--用户注册-end-->

			</div>
		</div>
		<div id="clear"></div>
		<div id="footer" >
			<img src="img/footer.jpg" />
		</div>
		<div id="clear"></div>
	<div>
	<p>联系我们 联系我们 联系我们 联系我们 联系我们 联系我们
	</p>
	<p>
		Copyright © 2005-2016 传智商城 版权所有
	</p>
</div>
	</body>

</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--方式1:内联式   通过script标签-->
		<script>
			/*直接在标签体中编写js代码即可*/
			// 
			alert("hello js!");
		</script>
		
		<!--方式2:外联式     a.首先编写外部的js代码    b.引入该js文件-->
		<script type="text/javascript" src="js/first.js" >
			alert("情绪是智慧不够的产物!");
			
		</script>
		
		
		
		<!--
			注意事项:
				加载顺序:
					从上到下
					从左到右
				一个页面中可以出现多个script标签,可以放在任何位置(一般放在head标签中,注意正确嵌套)
				外联式的script一旦是src属性,那么标签体失效.
		-->
	</head>
	<body>
		<script>
			/*直接在标签体中编写js代码即可*/
			// 
			alert("hello js11111!");
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//变量声明
			var age = 18;
			var name1 = "tom";
//			alert(age);
			alert(name1);
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var age = 18;   //number
			age = "tom";	//string
			age = true;		//boolean
//			alert(typeof age);
			var age1 = null;	//object
//			alert(typeof age1); 弹出一个窗口(会停止程序的运行)
			var age2;	//undefined
			alert(typeof age2);
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//等性运算符
			// == !=	判断数值
//			alert(18==18);	//true
//			alert(18=="18");	//true
			//一个number类型的数值和一个非数值形式的字符串不能比较
//			alert(66=="B");		//false 
//			alert("B"=="B");	//true 比较ASCII
//			alert("A"=="B");	//false
			
			// === !==   判断数值和类型
//			alert(18==="18");	//false
//			alert(18!=="18");	//true
//			alert("B"==="B");	//true

			//关系运算符
			// > < >= <=
//			alert(18>19);		//fasle
//			alert(18>"17");		//true
			//一个number类型的数值和一个非数值形式的字符串不能比较
//			alert(67>"B");		//false
//			alert("B">"A");		//true  比较ASCII
			
			//逻辑运算符
			//&& || !
			//&&
//			alert(true&&false);		//false
//			alert(false&&true);		//fasle
//			alert(true&&true);		//true
			//在&&运算中,如果两边都为true(对象转为的Boolean),那么运算结果为右边的值
//			alert("abc"&&true);		//true
//			alert(true&&"abc");		//abc
			//||
//			alert(true||false);		//true
//			alert(false||true);		//true
//			alert(false||false);	//false
			//在||运算中,如果两边都为true(对象转为的Boolean),那么运算结果为左边的值
//			alert("abc"||false);	//abc
//			alert(false||"abc");	//abc
			alert("abc"||true);		//abc



		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
//			if(18>17){
//				alert("18大于17");
//			}
			for(var i=0;i<3;i++){
				alert(i);
			}
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			//编写普通函数
			function add(){
				alert(1+1);
			}
			//调用函数
//			add();

			
			//匿名函数(先编写后使用)
			var add1 = function(i,j){
				alert(i+j);
			}
//			add1(4,4);

			//带有参数的函数
			function add2(i,j){
				alert(i+j);
			}
//			add2(3,3);
			//返回值
			function add3(i,j){
				return i+j;
			}
			var sum = add3(5,5);
			alert(sum);
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn(){
				alert("44944");
			}
			
		</script>
	</head>
	<body>
		<!--方式1:绑定事件   通过标签的事件属性-->
		<input type="button" value="点我44" onclick="btn("111")" />
		<!--方式2:派发事件    -->
		<input type="button" value="再点我44" id="btnId" />
	</body>
	<script>
		//1.获取事件源(标签对象)
		var inpObj = document.getElementById("btnId");
		//2.给事件源派发事件
		inpObj.onclick = function(data){
			alert(449444444);
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//页面加载成功事件 等页面加载完毕后再来加载页面加载成功事件中的代码片段  
			onload = function(){
//				alert("123");
				//1.获取事件源(标签对象)
				var inpObj = document.getElementById("btnId");
				//2.给事件源派发事件
				inpObj.onclick = function(){
					alert(449444444);
				}
			}
			
		</script>
	</head>
	<body>
		<!--方式2:派发事件    -->
		<input type="button" value="再点我44" id="btnId" />
	</body>
</html>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		/*	步骤分析:
		1.确定事件(表单提交事件)
			//checkForm函数必须要有返回值(Boolean)
			<form onsubmit="return checkForm()"></form>
		2.编写函数(校验用户名和密码)
			a.获取用户名和密码的标签对象
				var obj = document.getElementById("id");
			b.获取用户名和密码的值(value属性)
				var userVal = obj.value;
			c.校验是否为空
				if(userVal==""){
					alert("用户名不可为空");
					return false;
				}
			d.返回值
			return true;*/
		//必须要有返回值
		function checkForm(){
			//a.获取用户名和密码的标签对象
			var userObj = document.getElementById("username");
			var pwdObj = document.getElementById("password");
			//b.获取用户名和密码的值(value属性)
			var userVal = userObj.value;
			var pwdVal = pwdObj.value;
//			alert(userVal+"   "+pwdVal);
			//c.校验是否为空
			if(userVal==""){
				alert("用户名不可为空");
				return false;
			}
			if(pwdVal==""){
				alert("密码不可为空");
				return false;
			}
			return true;
		}
	</script>
	<body>
		<form action="#" method="get" onsubmit="return checkForm()">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
					<td><span id="repassword_msg"></span></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
					<td><span id="email_msg"></span></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<title></title>
		<link rel="stylesheet" href="../css/lunbo.css" />
		<script type="text/javascript">
		/*	步骤分析:
		1.确定事件(页面加载成功事件)
			onload = function(){
				//设置周期执行的定时
				setInterval(changeImg,2000);
			}
		2.编写changeImg函数(改变图片)
			function changeImg(){
				a.获取图片的标签对象
					var imgObj = document.getElementById("id");
				b.改变src属性的值
					imgObj.src = "url";
			}*/
			onload = function(){
				//设置周期执行的定时
				setInterval(changeImg,2000);
			}
			var i = 1;
			function changeImg(){
				i++;
				//a.获取图片的标签对象
				var imgObj = document.getElementById("imgId");
				//b.改变src属性的值
//				alert(imgObj.src);
				imgObj.src = "../img/"+i+".jpg";
				//判断是否是最后一张
				if(i==3){
					i=0;
				}
			}
		</script>
	</head>
	<body>
		<!--
			一个大div中放置8个div
		-->
		<div>
			<!--logo
				嵌套三个div
			-->
			<div class="header">
				<div>
					<img src="../img/logo2.png" height="40px" />
				</div>
				<div>
					<img src="../img/header.jpg" />
				</div>
				<div>
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--菜单-->
			<div class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
				</ul>
			</div>
			
			<!--轮播图-->
			<div class="lunbo">
				<img id="imgId" src="../img/1.jpg"/>
			</div>
			
			<!--热门
				将起划分成两个div
					左边放图片
					右边的放商品
						
			-->
			<div class="hot">
				<!--存放热门商品和一张图片-->
				<div>
					<h2 style="display: inline;">热门商品</h2>
					<img  src="../img/title2.jpg" />
				</div>
				<div>
					<!--存放左边的图片-->
					<div class="left">
						<img src="../img/big01.jpg" />
					</div>
					<!--存放商品图片-->
					<div class="right">
						<div class="middle">
							<img src="../img/middle01.jpg" />
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
					</div>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/ad.jpg"/>
			</div>
			
			<!--最新-->
			<div></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/footer.jpg"/>
			</div>
			
			<!--版权foot-->
			<div class="foot">
				<p>
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
					</p>
					<p>
						Copyright &copy; 2005-2016 传智商城 版权所有
					</p>
			</div>
			
			
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//周期执行定时器
//			var interId = setInterval(fun,1000);
//			var interId = setInterval("fun()",1000);
			var i = 0;
			function fun(){
				i++;
				alert(i);
				if(i==3){
					//清除周期执行定时器
					clearInterval(interId);
				}
			}
			//单次执行定时器
//			var timeId = setTimeout(fun1,1000);
			var timeId = setTimeout("fun1()",1000);
			function fun1(){
				i++;
				alert(i);
			}
			//清除单次执行定时器
			//clearTimeout(timeId);
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			.cle{
				clear: both;
			}
			/*logo 部分的div*/
			.header{
				width: 100%;
			}
			.header div{
				float:left;
				width:33.33%;
				height: 60px;
				line-height: 50px;
			}
			.header a{
				padding: 15px;
			}
			
			/*菜单部分*/
			.menu{
				width: 100%;
				background-color: #000;
				height: 50px;
				padding-top:1px
			}
			
			.menu ul li{
				list-style-type: none;
				display: inline;
			}
			
			.menu a{
				font-size: 25px;
				color: #fff;
				
			}
			
			/*轮播图*/
			.lunbo{
				width:100%;
				margin-top:10px;
				margin-bottom: 10px;
			}
			
			.lunbo img{
				width:100%;
			}
			
			/*热门商品*/
			/*.left,.right{
				float:left;
			}*/
			.left{
				float:left;
				width: 16%;
				height: 500px;
			}
			.right{
				float: left;
				width:84%;
				text-align: center;
				height: 500px;
			}
			
			.middle{
				float:left;
				width: 50%;
				height: 250px;
			}
			.item{
				float:left;
				width:16.66%;
				height: 250px;
			}
			
			/*给广告*/
			.ad1{
				width: 100%;
			}
			.ad1 img{
				width: 100%;
			}
			
			/*版权*/
			.foot{
				width:100%;
			}
			.foot p{
				text-align: center;
			}
		</style>
		<script>
		/*	步骤分析:
		1.确定事件(页面加载成功事件)
			0.设置周期执行定时器的id
			var interId;
			0.设置计数器
			var count = 0;
			onload = function(){
				//设置周期执行的定时器
				interId = setInterval(showAd,4000);
			}
		2.编写showAd函数(展示广告)
			0.计数
			count++;
			a.获取div标签对象
				var divObj = document.getElementById("divId");
			b.展示广告(显示div)
				divObj.style.css属性 = "block";
			c.设置单次执行定时器(用来计时)
				setTimeout(hideAd,2000);
			d.判断是否已经执行三次了
				if(count==3){
					clearInterval(interId);
				}
		3.编写hideAd函数(隐藏div)
			a.获取div标签对象
				var divObj = document.getElementById("divId");
			b.展示广告(显示div)
				divObj.style.css属性 = "none";*/
			var interId;
			var count = 0;
			onload = function(){
				//设置周期执行的定时器
				interId = setInterval(showAd,4000);
			}
			//2.编写showAd函数(展示广告)
			function showAd(){
				//0.计数
				count++;
				//a.获取div标签对象
				var divObj = document.getElementById("ad");
				//b.展示广告(显示div)
				divObj.style.display = "block";
				//c.设置单次执行定时器(用来计时)
				setTimeout("hideAd()",2000);
				//d.判断是否已经执行三次了
				if(count==3){
					clearInterval(interId);
				}
			}
			function hideAd(){
				//a.获取div标签对象
				var divObj = document.getElementById("ad");
				//b.展示广告(显示div)
				divObj.style.display = "none";
			}
		</script>
	</head>
	<body>
		<div id="ad" style="width:100%;display: none;">
			<img src="../img/ad_.jpg" width="100%" />
		</div>
		<!--
			一个大div中放置8个div
		-->
		<div>
			<!--logo
				嵌套三个div
			-->
			<div class="header">
				<div>
					<img src="../img/logo2.png" height="40px" />
				</div>
				<div>
					<img src="../img/header.jpg" />
				</div>
				<div>
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--菜单-->
			<div class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
				</ul>
			</div>
			
			<!--轮播图-->
			<div class="lunbo">
				<img src="../img/1.jpg"/>
			</div>
			
			<!--热门
				将起划分成两个div
					左边放图片
					右边的放商品
						
			-->
			<div class="hot">
				<!--存放热门商品和一张图片-->
				<div>
					<h2 style="display: inline;">热门商品</h2>
					<img src="../img/title2.jpg" />
				</div>
				<div>
					<!--存放左边的图片-->
					<div class="left">
						<img src="../img/big01.jpg" />
					</div>
					<!--存放商品图片-->
					<div class="right">
						<div class="middle">
							<img src="../img/middle01.jpg" />
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						<div class="item">
							<img src="../img/small08.jpg" />
							<p align="center"><a href="#">电饭煲</a></p>
							<p align="center">200</p>
						</div>
						
					</div>
				</div>
			</div>
			
			<div class="cle"></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/ad.jpg"/>
			</div>
			
			<!--最新-->
			<div></div>
			
			<!--广告-->
			<div class="ad1">
				<img src="../img/footer.jpg"/>
			</div>
			
			<!--版权foot-->
			<div class="foot">
				<p>
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
						<a href="#">关于我们</a> 
					</p>
					<p>
						Copyright &copy; 2005-2016 传智商城 版权所有
					</p>
			</div>
			
			
		</div>
	</body>
	
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn1(){
//				history.forward();
				history.go(1);
			}
		</script>
	</head>
	<body>
		我是a页面<br />
		<a href="b.html">b.html</a><br>
		<input type="button" value="前进" onclick="btn1()"/>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn2(){
//				history.back();
				history.go(-1);
			}
		</script>
	</head>
	<body>
		我是b页面<br />
		
			<input type="button" value="后退" onclick="btn2()"/>
		
	</body>
	
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn3(){
				alert(kk);
			}
			function btn(){
				kk = "../案例3-弹出广告.html";
			}
		</script>
	</head>
	
	<body>
		<input type="button" value="获取url" onclick="btn3()">
		<input type="button" value="设置url" onclick="btn()">
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			onload = function(){
				document.getElementById("inp").onclick = function(){
					window.close();
				}
			}
		</script>
		
	</head>
	<body>
		我是a页面
		<input type="button" value="close" id="inp"/>
	</body>
	<script>
		
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//打开a页面
			function btn(){
				window.open("a.html");			
			}
		</script>
	</head>
	<body>
			<input type="button" value="openA" onclick="btn()"/>
	</body>
	
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//对话框
//			var mes = window.prompt("请输入你的姓名","tom");
//			alert(mes);
			//确认框
			var message = confirm("你确定付款吗");
			alert(message);
		</script>
	</head>
	<body>
	</body>
	
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//获取文本框的值
			function getVal(){
				//1.获取要操作的标签对象
				var inpObj = document.getElementById("inp");
				//2.获取value属性的值
				alert(inpObj.value);
			}
			//设置value属性的值
			function setVal(){
				//1.获取要操作的标签对象
				var inpObj = document.getElementById("inp");
				//2.设置value的值
				inpObj.value = "jerry";
			}
		</script>
	</head>
	<body>
		<input type="text" name="username" value="tom" id="inp"/><br />
		<input type="button" value="获取value的值" onclick="getVal()"/>
		<input type="button" value="设置value的值" onclick="setVal()"/>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//获取标签体的内容
			function getVal(){
				//1.获取要操作的标签对象
				var spObj = document.getElementById("sp");
				//2.获取标签体的内容
				alert(spObj.innerHTML);
			}
			//设置标签体的内容
			function setVal(){
				//1.获取要操作的标签对象
				var spObj = document.getElementById("sp");
				//2.设置标签体的内容
				spObj.innerHTML += "<font color='red'>如今的现在早已不是曾经说好的以后</font>";
			}
		</script>
	</head>
	<body>
		<span id="sp">佑我中华</span><br />
		<input type="button" value="获取标签体的内容" onclick="getVal()"/>
		<input type="button" value="设置标签体的内容" onclick="setVal()"/>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//校验
			function checkInp(){
				//0.获取要校验的值
				var val = document.getElementById("inp").value;
				//校验
				//1.编写正则表达式
				var zz = /^[a-z0-9_-]{3,16}$/;  //object
				var kzz = /^\s*$/;
//				alert(typeof zz);
				//2.校验值
//				var flag = zz.test(val);
//				alert(flag);

//				alert(kzz.test(val));
				if(kzz.test(val)){
					alert("用户名不可为空");
				}else if(!zz.test(val)){
					alert("用户名不符合格式");
				}else{
					alert("满足格式....");
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="inp" /><br />
		<input type="button" value="校验输入的值" onclick="checkInp()"/>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//获得焦点的时候要触发的函数
			function focusFun(){
				document.getElementById("sp").innerHTML = "输入框获得焦点";
			}
			//失去焦点的时候要触发的函数
			function blurFun(){
				document.getElementById("sp").innerHTML = "输入失去焦点了啊....";
			}
			//内容改变的时候要触发的函数
			function changeFun(){
				alert("输入框的内容改变了...");
			}
		</script>
	</head>
	<body>
		<input type="text" onfocus="focusFun()" onblur="blurFun()" onchange="changeFun()"/><br />
		<span id="sp"></span><br />
	</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		#e02, #e022 {
			border: 1px solid #000000;
  			height: 200px;
 			width: 200px;
		}
	</style>
	<script type="text/javascript">
		
		// 页面加载事件:当整个html页面加载成功调用
		window.onload = function(){
			// 文本框事件
			var e01 = document.getElementById("e01");
			e01.onfocus = function(){
				html("textMsg","文本框获得焦点:focus");
			}
			e01.onblur = function(){
				html("textMsg","文本框失去焦点:blur");
			}
			e01.onkeydown = function(){
				html("textMsg","键盘按下:keydown;");
			}
			e01.onkeypress = function(event){
				var event = event || window.event;
				append("textMsg","键盘按:keypress ("+ String.fromCharCode(event.keyCode)+");");
			}
			e01.onkeyup = function(){
				append("textMsg","键盘弹起:keyup;");
			}
			
			// 鼠标事件
			var e02 = document.getElementById("e02");
			e02.onmouseover = function(){
				html("divMsg","鼠标移上:mouseover");
			}
			e02.onmouseout = function(){
				html("divMsg","鼠标移出:mouseout");
			}
			
			
			var e022 = document.getElementById("e022");
			e022.onmousedown = function(){
				html("divMsg2","鼠标按下:mousedown");
			}
			e022.onmouseup = function(){
				html("divMsg2","鼠标弹起:mouseup");
			}
			
			
			// 按钮事件
			var e03 = document.getElementById("e03");
			e03.onclick = function () {
				html("buttonMsg","单击:click");
			};
			e03.ondblclick= function () {
				html("buttonMsg","双击:dblclick");
			};
			
		};
		
		/**
		 * 指定位置显示指定信息
		 * @param objId ,元素的id属性值
		 * @param  text,需要显示文本信息
		 */
		function html(objId,text){
			document.getElementById(objId).innerHTML = text;
		}
		/**
		 * 指定位置追加指定信息
		 * @param objId ,元素的id属性值
		 * @param  text,需要显示文本信息
		 */
		function append(objId,text){
			document.getElementById(objId).innerHTML += text;
		}
		
	</script>
	
</head>
<body>
	<input id="e01" type="text" /><span id="textMsg"></span>
	<hr/>
	<div id="e02" >鼠标移上来试试</div><span id="divMsg"></span>
	<hr/>
	<div id="e022" >鼠标移上来点击试试</div><span id="divMsg2"></span>
	<hr/>
	<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn(){
				/*通过id选择器获取文本框的值*/
				var userObj = document.getElementById("usernameId");
//				alert(userObj.value);
				/*获取所有span标签中的值*/
//				var spanObjArr = document.getElementsByTagName("span");
//				for(var i=0;i<spanObjArr.length;i++){
//					alert(spanObjArr[i].innerHTML);
//				}
				/*获取所有class为spanClass的元素对象*/
//				var spanObjArr1 = document.getElementsByClassName("spanClass");
//				for(var i=0;i<spanObjArr1.length;i++){
//					alert(spanObjArr1[i].innerHTML);
//				}
				/*获取name为hobby的元素对象*/
				var hobbyObjArr = document.getElementsByName("hobby");
				alert(hobbyObjArr.length);
			}
		</script>
	</head>
	<body>
		<input type="text" value="tom" id="usernameId" name="username"/><br />
		<input type="checkbox" name="hobby" value="抽烟" />抽烟<br />
		<input type="checkbox" name="hobby" value="喝酒" />喝酒<br />
		<input type="checkbox" name="hobby" value="烫头" />烫头<br />
		<span class="spanClass">佑我中华</span>
		<span class="spanClass">佑我中华1</span>
		<span>佑我中华2</span><br />
		<input type="button" value="获取对象" onclick="btn()" />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			function btn(){
//				//创建一个标题元素节点,标题名称客,并将它加到div内部 	<h1>客</h1>
//				//创建元素节点
//				var ele = document.createElement("h1");//<h1></h1>
//				//创建文本节点
//				var eleText = document.createTextNode("客");//客
//				//将文本节点添加到指定的节点中
//				ele.appendChild(eleText);//<h1>客</h1>
//				//获取div元素对象
//				var divObj = document.getElementById("di");
//				divObj.appendChild(ele);
				
				var divObj = document.getElementById("di");
				divObj.innerHTML+="<h1>客</h1>";
			}
			function btn1(){
				//删除div元素中的子节点
				var divObj = document.getElementById("di");
//				divObj.removeChild(divObj.childNodes[0]);
//				divObj.innerHTML = "";
				divObj.remove();
			}
		</script>
	</head>
	<body>
		<div id="di">
		
		</div>
		<input type="button" value="设置" onclick="btn()" />
		<input type="button" value="删除" onclick="btn1()" />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function btn(){
				var inpObj = document.getElementById("inp");
				/*给标签对象设置属性和值*/
//				inpObj.setAttribute("value","jerry");
				inpObj.value = "jerry";
			}
			function btn1(){
				var inpObj = document.getElementById("inp");
//				var Val = inpObj.getAttribute("value");
//				alert(Val);
				alert(inpObj.value);
			}
			function btn2(){
				var inpObj = document.getElementById("inp");
				inpObj.removeAttribute("value");
//				inpObj.value = "";
			}
		</script>
	</head>
	<body>
		<input id="inp" name="asd" value="tom"/><br />
		<input type="button" value="给输入框设置默认值" onclick="btn()" /><br />
		<input type="button" value="获取输入框的值" onclick="btn1()" /><br />
		<input type="button" value="删除输入框的value属性" onclick="btn2()" /><br />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var arr = new Array();
			var arr1 = new Array(3);
			var arr2 = new Array(1,2,3);
			
			arr[0] = 11;
			arr[1] = "tom";
			arr[2] = true;
//			alert(arr.length);
//			alert(arr.join("#"));//遍历数组,在数组每个元素之间加入#
//			alert(arr);
//			var ele = arr.shift();
//			alert(ele);
			var l = arr.unshift(5,3);
			alert(arr);
//			alert(l);
//			alert(arr);
//			alert(arr.sort());
//			alert(arr.reverse());
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//String
			var str = "[www.baidu.com]";
//			alert(str.length);
//			alert(str.substring(1,str.length-1));
//			alert(str.slice(1,-1));
			//Boolean
//			alert(Boolean("abc"));
			//Math
//			alert(Math.PI);
			
			//Date
//			alert(new Date().toLocaleString());
			
			var str = "188.8元";
//			alert(parseInt(str));
//			alert(parseFloat(str));
//			alert(Number(str)); //NaN
			
			var str1 = "www.baidu.com/引用数据类型 .html";
			var str2 = encodeURI(str1);
			document.write(str2+"<br/>");
			var str3 = decodeURI(str2);			
			document.write(str3);
			
			var str4 = "alert('hello js')";
			eval(str4);
			
		</script>
	</head>
	<body>
	</body>
</html>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		/*	步骤分析:
		1.确定事件(表单提交事件)
			<form onsubmit="retrun checkForm()"></form>
			<form id="formId"></form>
		2.编写checkForm函数
			function checkForm(){
				//0/设置全局开关
				var flag = true;
				//a.获取用户名和密码输入框对象
					var 对象 = document.getElementById("id");
				//b.获取用户名和密码的值
					var val = 对象.value;
				//c.编写正则表达式
					
				//d.校验
					if(zz.test(val)){
						//校验不通过
						给对应的span标签中填写提示信息
						flag = false;
					}else{
						//校验通过
						给对应的span标签中填写提示信息
					}
				//e.返回值
				return flag;
					
			}*/
			onload = function(){
				document.getElementById("formId").onsubmit=function(){
					//设置全局开关
					var flag = true;
					//a.获取用户名和密码输入框对象
					var userObj = document.getElementById("username");
					var pwdObj = document.getElementById("password");
					//b.获取用户名和密码的值
					var userVal = userObj.value;
					var pwdVal = pwdObj.value;
//					alert(userVal+"   "+pwdVal);
					//c.编写正则表达式
					var zz = /^[a-z0-9_-]{3,16}$/;  //object
					var kzz = /^\s*$/; 
					//d.校验
					//用户名
					if(kzz.test(userVal)){
						//校验不通过
						//给对应的span标签中填写提示信息
						//获取span标签对象
						document.getElementById("username_msg").innerHTML = "用户名不可为空";
						flag = false;
					}else if(!zz.test(userVal)){
						//获取span标签对象
						document.getElementById("username_msg").innerHTML = "用户名的格式不合法";
						flag = false;
					}else{
						//获取span标签对象
						document.getElementById("username_msg").innerHTML = "✔";
					}
					
					//密码
					if(kzz.test(pwdVal)){
						//校验不通过
						//给对应的span标签中填写提示信息
						//获取span标签对象
						document.getElementById("password_msg").innerHTML = "<font color='#f00'>密码不可为空</font>";
						flag = false;
					}else if(!zz.test(pwdVal)){
						//获取span标签对象
						document.getElementById("password_msg").innerHTML = "密码的格式不合法";
						flag = false;
					}else{
						document.getElementById("password_msg").innerHTML = "✔";
					}
					
					return flag;
				}
			}
	</script>
	<body>
		<form action="#" method="get" id="formId">
			<table width="60%" height="60%"  align="center" bgcolor="#ffffff">
				<tr>
					<td colspan="3">会员注册USER REGISTER</td>
				</tr>
				<tr>
					<td width="20%">用户名:</td>
					<td width="40%"><input type="text" name="username" id="username"></td>
					<td width="40%"><span id="username_msg"></span></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="password" id="password"></td>
					<td><span id="password_msg"></span></td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td><input type="password" name="repassword" id="repassword"></td>
					<td><span id="repassword_msg"></span></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input type="text" name="email" id="email"></td>
					<td><span id="email_msg"></span></td>
				</tr>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="男"> 男
						<input type="radio" name="sex" value="女" />女
					</td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td>
						<input type="text" name="birthday">

					</td>
				</tr>
				<tr>
					<td>验证码</td>
					<td>
						<input type="text" name="checkcode">
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="注册" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*		步骤分析:
			1.确定事件(页面加载成功事件)
				onload = function(){
					
				}
			2.编写匿名函数
				a.获取当前页面所有行对象
					var trObjArr = document.getElementsByTagName("tr");
				b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
					for(var i=0;i<trObjArr.length;i++){
						if(i%2==0){
							trObjArr[i].style.backgroundColor = "颜色";
						}else{
							trObjArr[i].style.backgroundColor = "颜色";
						}
					}*/
			onload = function (){
				//a.获取当前页面所有行对象
				var trObjArr = document.getElementsByTagName("tr");
				//b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
				for(var i=1;i<trObjArr.length;i++){
					if(i%2==0){
						trObjArr[i].style.backgroundColor = "#ff0";
					}else{
						trObjArr[i].style.backgroundColor = "#f0f";
					}
				}
			}
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			
			<tr style="background-color: #999999;">
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<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>
		</table>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*	步骤分析:
		1.确定事件(单击事件)
			给头部的复选框添加单击事件
		2.编写函数
			a.获取头部复选框状态
				对象.checked;
			b.获取其他的复选框对象
			c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性*/
			function checkAll(flag){
//				alert(flag);
				//a.获取头部复选框状态
//				alert(obj.checked);
				//b.获取其他的复选框对象
				var elseTrObjArr = document.getElementsByClassName("itemSelect");
				//c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性
				for(var i=0;i<elseTrObjArr.length;i++){
					elseTrObjArr[i].checked = flag;
				}
			}
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
			</tr>
			<tr>								<!--this表示当前元素对象-->
				<th><input type="checkbox" onclick="checkAll(this.checked)"></th>
				<th>分类ID</th>
				<th>分类名称</th>
				<th>分类描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>2</td>
				<td>电脑办公</td>
				<td>电脑办公类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>4</td>
				<td>家居饰品</td>
				<td>家居饰品类商品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			// 定义二维数组:
			var arr = new Array(4);
			arr[0] = new Array("石家庄","邯郸","保定","秦皇岛");
			arr[1] = new Array("郑州市","洛阳市","安阳市","南阳市");
			arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
			arr[3] = new Array("长春市","吉林市","四平市","通化市");
		</script>
		<script>
			/*步骤分析:
		1.确定事件(改变事件)
			给省份的下拉选添加改变事件
		2.编写changePro函数
			function changePro(){
				a.获取选中省份所对应的市数组(value)
					var cityArr = arr[value];
				b.获取市的下拉选对象
					var cityObj = document.getElementById("cityId");
				
				c.遍历市数组,将每一个市拼成option追加到市的下拉选中
					cityObj.innerHTML += "";
					
			}*/
			function changePro(index){
//				alert(index);
//				a.获取选中省份所对应的市数组(value)
				var cityArr = arr[index];
				//b.获取市的下拉选对象
				var cityObj = document.getElementById("city");
				//初始化
				cityObj.innerHTML = "<option>=请选择=</option>";
				//c.遍历市数组,将每一个市拼成option追加到市的下拉选中
				for(var i=0;i<cityArr.length;i++){
					cityObj.innerHTML += "<option>"+cityArr[i]+"</option>";
				}
			}
		</script>
	</head>
	<body>
		<form action="#" method="get">
			<input type="hidden" name="id" value="007"/>
			姓名:<input name="username" value="xuduoduo"/><br>
			密码:<input type="password" name="password"  value="123"><br>
			性别:<input type="radio" name="sex" value="1" checked="checked">男
				<input type="radio" name="sex" value="0">女
				<br>
			爱好:<input type="checkbox" name="hobby" value="eat">吃
				<input type="checkbox" name="hobby" value="drink" checked="checked">喝
				<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
				<br>
			头像:<input type="file" name="photo"><br>
			籍贯:
				<select name="pro" onchange="changePro(this.value)">
					<option >--请选择--</option>
					<option value="0">河北</option>
					<option value="1">河南</option>
					<option value="2">辽宁</option>
					<option value="3">吉林</option>
				</select>
				<select id="city">
					<option >-请选择-</option> 	
				</select>
			<br>
			自我介绍:
				<textarea name="intr" cols="40" rows="4">good!</textarea>
			<br>
			<input type="submit" value="保存"/>
			<input type="reset" />
			<input type="button" value="普通按钮"/>
		</form>
	</body>
</html>
<!--
	
-->


案例1-注册页面的简单校验
	需求分析:
		当表单提交的时候,对用户名和密码进行校验,校验是否为空,如果用户名和密码为空,则弹框提示并不允许表单提交.反之允许
	技术分析:
		javaScript:
	//////////////
	步骤分析:
		1.确定事件(表单提交事件)
			//checkForm函数必须要有返回值(Boolean)
			<form onsubmit="return checkForm()"></form>
		2.编写函数(校验用户名和密码)
			a.获取用户名和密码的标签对象
				var obj = document.getElementById("id");
			b.获取用户名和密码的值(value属性)
				var userVal = obj.value;
			c.校验是否为空
				if(userVal==""){
					alert("用户名不可为空");
					return false;
				}
			d.返回值
			return true;
案例2-轮播图
	需求分析:
		页面加载成功后,每隔2秒切换一张图片
	技术分析:
		javaScript:
		定时器
	///////////
	步骤分析:
		1.确定事件(页面加载成功事件)
			onload = function(){
				//设置周期执行的定时
				setInterval(changeImg,2000);
			}
		2.编写changeImg函数(改变图片)
			function changeImg(){
				a.获取图片的标签对象
					var imgObj = document.getElementById("id");
				b.改变src属性的值
					imgObj.src = "url";
			}

案例3-弹出广告
	需求分析:
		页面加载成功后,每隔4秒展示一次广告,广告时间2秒钟,以此轮询3次
	技术分析:
		定时器
	/////////////////////
	步骤分析:
		1.确定事件(页面加载成功事件)
			0.设置周期执行定时器的id
			var interId;
			0.设置计数器
			var count = 0;
			onload = function(){
				//设置周期执行的定时器
				interId = setInterval(showAd,4000);
			}
		2.编写showAd函数(展示广告)
			0.计数
			count++;
			a.获取div标签对象
				var divObj = document.getElementById("divId");
			b.展示广告(显示div)
				divObj.style.css属性 = "block";
			c.设置单次执行定时器(用来计时)
				setTimeout(hideAd,2000);
			d.判断是否已经执行三次了
				if(count==3){
					clearInterval(interId);
				}
		3.编写hideAd函数(隐藏div)
			a.获取div标签对象
				var divObj = document.getElementById("divId");
			b.展示广告(显示div)
				divObj.style.css属性 = "none";

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券