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 © 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 © 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(location.href);
}
function btn(){
location.href = "../案例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";
javaWeb技术第二篇之CSS、事件和案例的更多相关文章
- javaWeb技术第一篇之HTML
<!-- 当前是最简的html --> <html> <!-- 告诉浏览器当前是一个html文档 最外面的标签. --> <head> <!--h ...
- android apk 防止反编译技术第二篇-运行时修改字节码
上一篇我们讲了apk防止反编译技术中的加壳技术,如果有不明白的可以查看我的上一篇博客http://my.oschina.net/u/2323218/blog/393372.接下来我们将介绍另一种防止a ...
- android apk 防止反编译技术第二篇-运行时修改Dalvik指令
上一篇我们讲了apk防止反编译技术中的加壳技术,如果有不明白的可以查看我的上一篇博客http://my.oschina.net/u/2323218/blog/393372.接下来我们将介绍另一种防止a ...
- javaweb回顾第二篇tomcat和web程序部署
前言这篇主要说下关于tomcat中一些属性和web程序的简单部署,可能在实际开发有更好的部署方式,但是这也是一个基础. 1:tomcat 关于tomcat估计只要接触java的人都听过这个名字,那我们 ...
- 第二篇、css尺寸和边框
一.尺寸和标签图 二.尺寸单位 %:百分比 in:英寸 cm:厘米 mm:毫米 pt:磅(点)(1pt等于1/72英寸) px:像素(计算机屏幕上的一个点) em:1em等于当前的字体尺寸,2em等于 ...
- javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
- 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...
- JavaWeb学习总结第二篇--第一个JavaWeb程序
JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框架进行改写).于是我在这里记录下 ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- iOS开发——高级技术精选&底层开发之越狱开发第二篇
底层开发之越狱开发第二篇 今天项目中要用到检查iPhone是否越狱的方法. Umeng统计的Mobclick.h里面已经包含了越狱检测的代码,可以直接使用 /*方法名: * isJailbroken ...
随机推荐
- go 利用chan的阻塞机制，实现协程的开始、阻塞、返回控制器
一.使用场景 大背景是从kafka 中读取oplog进行增量处理,但是当我想发一条命令将这个增量过程阻塞,然后开始进行一次全量同步之后,在开始继续增量. 所以需要对多个协程进行控制. 二.使用知识 1 ...
- sleep方法要求处理中断异常:InterruptedException
package seday08.thread;/*** @author xingsir * 当一个线程调用sleep方法处于阻塞状态的过程中,这个线程的中断方法interrupt被调用时,则sleep ...
- 从零开始学.net core（一）
https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.0
- Django：永别了pycrypto库~
在开发微信登陆功能时,解密用户信息需要使用到 Crypto 包,所以安装了pycrypto库. Linux.OS X 系统均可直接 pip install pycrypto . 最近换到win10下开 ...
- 达梦7入门技术总结--DCA级别
说明: 1)该实验所有过程均是本人亲自敲命令完成,所有代码运行正确 2)安装过程使用的是suse11 sp3操作系统,后续的实验过程换成了麒麟中标,因此部分路径可能存在差异 3)安装过程使用了命令行安 ...
- 阿里巴巴供应链平台事业部2020届秋招-Java工程师
阿里巴巴供应链平台事业部,2020届秋季校园招聘开始啦!Java开发工程师虚位以待,机会难得,占坑抓紧. 入职就发师兄,一对一师兄辅导. 在这里,你将有机会接触阿里集团的所有数据库.中间件等基础设施. ...
- 【转】淘宝UED上关于chrome的transition闪烁问题的解决方案
最近在用BetterScroll实现一个功能的时候,在滚动区域中会有一个绝对定位的按钮,结果在IOS中出现了快速滚动,停止的时候,会先消失后显现的问题,所以查找了相关的文章,发现是transition ...
- CSS transition 的默认值
语法 transition: property duration timing-function delay|initial|inherit; 示例: div { width: 100px; ...
- 理解 Flutter 中的 Key
概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...
- 修改so库中的依赖名
修改so库中的依赖名 在ArchLinuxArm上有一些针对aarch64, arm, armeabi-v7a等Android常用架构的so库可以下载,有时候可以省去很多编译时间,且都是编译optim ...