03 JavaScript的使用
01 注册界面的校验
<!--
作者：offline
时间：2018-09-05
描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。
在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转.
在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
div{
border: 1px solid blue;
}
.bodyDiv{
width:90%;
} .bodyDiv > div{
width: 100%;
} .logoDiv{
width: 33%;
height: 50px;
float: left;
} .clear{
clear: both;
} ul li{
display: inline;
}
</style>
<script>
function tips(id,content){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>"
} function checkForm(){
//判断用户名不能为空
var username=document.getElementById("username").value;
if(username==""){
document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>"
return false;
}
//判断密码不能为空
var password=document.getElementById("password").value;
if(password==""){
document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>"
return false;
}
} </script>
</head>
<body>
<!--整体的div-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="50" />
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
</div>
<div style="height: 50px;background-color: black;">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
<form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" >
<table border="0" width="100%" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')">
<span id="usernameSpan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')">
<span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province">
<option>--请选择--</option>
</select>
<select name="city">
<option>--请选择--</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</div>
</div>
<!--最下面的两行-->
<div>
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div>
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
02 网站首页图片滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
#bodyDiv{
border: 1px solid blue;
width: 90%px;
}
.logoDiv{
border: 1px solid blue;
width: 33%;
float: left;
height: 50px;
}
.clear{
clear: both;
}
#menuDiv{
width: 100%;
height: 50px;
border: 1px solid blue;
background-color: black;
} #imgDiv{
width: 100%;
border: 1px solid blue;
} .productClass{
width: 100%;
border: 1px solid blue;
}
.contentClass{
width: 100%;
border: 1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
} #menuDiv a{
font-size: 20px;
color: white;
}
<!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题-->
</style>
<script>
window.onload=function(){
//设置定时
window.setInterval("changeImg()",5000);
}
var i=1;
function changeImg(){
i++;
if(i>3){
i=1;
}
var img1=document.getElementById("img1");
img1.src="../01静态界面/img/"+i+".jpg"
}
</script>
</head>
<body>
<!--整体的DIV-->
<div id="bodyDiv">
<!--首行分为三个小块-->
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="48"/>
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="48" />
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!--第二行的div-->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!--第三行，滚动的图片-->
<div id="imgDiv">
<img id="img1" src="../01静态界面/img/1.jpg" width="100%" />
</div>
<!--第四行，热门商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>热门商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--广告的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/ad.jpg" width="100%" height="80" />
</div>
<!--最新商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>最新商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--页脚的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div> <!--友情链接的Div-->
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
03 定时广告弹出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
#bodyDiv{
border: 1px solid blue;
width: 90%px;
}
.logoDiv{
border: 1px solid blue;
width: 33%;
float: left;
height: 50px;
}
.clear{
clear: both;
}
#menuDiv{
width: 100%;
height: 50px;
border: 1px solid blue;
background-color: black;
} #imgDiv{
width: 100%;
border: 1px solid blue;
} .productClass{
width: 100%;
border: 1px solid blue;
}
.contentClass{
width: 100%;
border: 1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
} #menuDiv a{
font-size: 20px;
color: white;
}
<!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题-->
</style>
<script>
var time;
window.onload=function(){
//设置定时
time=window.setInterval("show()",2000);
//图片的定时
window.setInterval("changeImg()",5000);
} //图片轮播的方法
var i=1;
function changeImg(){
i++;
if(i>3){
i=1;
}
var img1=document.getElementById("img1");
img1.src="../01静态界面/img/"+i+".jpg"
} //显示广告的方法
function show(){
var adDiv=document.getElementById("adDiv");
adDiv.style.display="block";
window.clearInterval(time);
time=window.setInterval("hide()",5000);
} //隐藏广告的方法
function hide(){
var adDiv=document.getElementById("adDiv");
adDiv.style.display="none";
window.clearInterval(time);
}
</script>
</head>
<body>
<!--整体的DIV-->
<div id="bodyDiv">
<div id="adDiv" style="width: 100%;display: none;">
<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"/>
</div>
<!--首行分为三个小块-->
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="48"/>
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="48" />
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!--第二行的div-->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!--第三行，滚动的图片-->
<div id="imgDiv">
<img id="img1" src="../01静态界面/img/1.jpg" width="100%" />
</div>
<!--第四行，热门商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>热门商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--广告的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/ad.jpg" width="100%" height="80" />
</div>
<!--最新商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>最新商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--页脚的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div> <!--友情链接的Div-->
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
04 优化注册界面
<!--
作者：offline
时间：2018-09-05
描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。
在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转.
在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
div{
border: 1px solid blue;
}
.bodyDiv{
width:90%;
} .bodyDiv > div{
width: 100%;
} .logoDiv{
width: 33%;
height: 50px;
float: left;
} .clear{
clear: both;
} ul li{
display: inline;
}
</style>
<script>
function tips(id,content){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>"
} function checkForm(){
//判断用户名不能为空
var username=document.getElementById("username").value;
if(username==""){
document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>"
return false;
}
//判断密码不能为空
var password=document.getElementById("password").value;
if(password==""){
document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>"
return false;
}
} </script>
</head>
<body>
<!--整体的div-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="50" />
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
</div>
<div style="height: 50px;background-color: black;">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
<form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" >
<table border="0" width="100%" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')">
<span id="usernameSpan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')">
<span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province">
<option>--请选择--</option>
</select>
<select name="city">
<option>--请选择--</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</div>
</div>
<!--最下面的两行-->
<div>
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div>
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
05 对后台显示界面数据的样式增加--隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeColor(){
//获得要操作的表格控制权
var tab1=document.getElementById("tab1");
//获得表格的所有的行数
var count =tab1.tBodies[0].rows.length;
//遍历每一行,注意这里采用了tbody因此要从0开始
for(var i=0;i<count;i++){
if(i%2==0){
tab1.tBodies[0].rows[i].style.backgroundColor="brown"; //字母或数字均可以修改颜色
}else{
tab1.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
} function checkAll(){
//获得复选框
var selectAll = document.getElementById("selectAll");
//获得下面的复选框，由于名字相同因此采用名字法获得
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
//如果被选中，则修改下面的checked属性
for(var i=0;i<ids.length;i++){
ids[i].checked = true;
}
}else{
for(var i=0;i<ids.length;i++){
ids[i].checked = false;
}
}
} </script>
</head>
<body onload="changeColor()">
<table id="tab1" border="1" width="80%" align="center">
<!--让表格头加粗并居中显示-->
<thead>
<tr>
<th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /> </th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</td>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>4</td>
<td>汽车用品</td>
<td>汽车用品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>5</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
06 对后台显示界面的处理--复选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeColor(){
//获得要操作的表格控制权
var tab1=document.getElementById("tab1");
//获得表格的所有的行数
var count =tab1.tBodies[0].rows.length;
//遍历每一行,注意这里采用了tbody因此要从0开始
for(var i=0;i<count;i++){
if(i%2==0){
tab1.tBodies[0].rows[i].style.backgroundColor="brown"; //字母或数字均可以修改颜色
}else{
tab1.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
} function checkAll(){
//获得复选框
var selectAll = document.getElementById("selectAll");
//获得下面的复选框，由于名字相同因此采用名字法获得
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
//如果被选中，则修改下面的checked属性
for(var i=0;i<ids.length;i++){
ids[i].checked = true;
}
}else{
for(var i=0;i<ids.length;i++){
ids[i].checked = false;
}
}
} </script>
</head>
<body onload="changeColor()">
<table id="tab1" border="1" width="80%" align="center">
<!--让表格头加粗并居中显示-->
<thead>
<tr>
<th><input type="checkbox" id="selectAll" name="selectAll" onclick="checkAll()" /> </th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</td>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>1</td>
<td>手机数码</td>
<td>手机数码</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>3</td>
<td>烟酒糖茶</td>
<td>烟酒糖茶</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>4</td>
<td>汽车用品</td>
<td>汽车用品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<th><input type="checkbox" name="ids" /> </th>
<td>5</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
07 对注册界面的优化
<!--
作者：offline
时间：2018-09-05
描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。
在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转.
在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
div{
border: 1px solid blue;
}
.bodyDiv{
width:90%;
} .bodyDiv > div{
width: 100%;
} .logoDiv{
width: 33%;
height: 50px;
float: left;
} .clear{
clear: both;
} ul li{
display: inline;
}
</style>
<script>
function tips(id,content){
document.getElementById(id+"Span").innerHTML="<font color='red'>"+content+"</font>"
} function checkForm(){
//判断用户名不能为空
var username=document.getElementById("username").value;
if(username==""){
document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名不能为空！</font>"
return false;
}
//判断密码不能为空
var password=document.getElementById("password").value;
if(password==""){
document.getElementById("passwordSpan").innerHTML="<font color='red'>密码不能为空！</font>"
return false;
}
} //！！！要特别注意是采用的括号而不是大括号
var arrs=new Array(5);//定义一个数组，用来存放省份
arrs[0]=new Array("杭州市","绍兴市");//每个省份又有不同的市来对应
arrs[1]=new Array("南京市","苏州市");
arrs[2]=new Array("武汉市","襄阳市");
arrs[2]=new Array("唐山市","保定市");
function changeCity(value){
//alert(value);代码检测 var city=document.getElementById("city");//获得第二个列表的内容 //在每次添加前需要把列表中的内容清空
for(var i=city.options.length;i>0;i--){
city.options[i]=null;
}
//或者直接把长度设为0 city.options.length=0; for(var i=0;i<arrs.length;i++){
if(value==i){
for(var j=0;j<arrs[i].length;j++){
var opEl=document.createElement("option");//创建元素
var textNode = document.createTextNode(arrs[i][j]);//创建一个文本节点
opEl.appendChild(textNode);//将文本的内容添加到option元素中
city.appendChild(opEl);//将option的元素添加到第二个列表中
}
}
}
} </script>
</head>
<body>
<!--整体的div-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="50" />
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
</div>
<div style="height: 50px;background-color: black;">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
<form action="02网站界面图片滚动.html" method="post" onsubmit="return checkForm()" >
<table border="0" width="100%" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" id="username" name="username" onfocus="tips('username','用户名由数字或字母组成!')">
<span id="usernameSpan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password" name="password" onfocus="tips('password','密码不少于六位!')">
<span id="passwordSpan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="repassword" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select id="province" name="province" onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">浙江省</option>
<option value="1">江苏省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
</select>
<select id="city" name="city">
<option>--请选择--</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</div>
</div>
<!--最下面的两行-->
<div>
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div>
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
03 JavaScript的使用的更多相关文章
- javaScript系列 [03]-javaScript原型对象
[03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- 03 Javascript初识
Javascript语言(★★★★★) Javascript是基于对象和事件驱动的脚本语言,作用在客户端. 特点: * 交互性 * 安全性(不能访问本地的硬盘) ...
- 03: JavaScript基础
目录: 参考W3school 1.1 变量 1.2 JavaScript中数据类型 1.3 JavaScript中的两种for循环 1.4 条件语句:if.switch.while 1.5 break ...
- 03.JavaScript简单介绍
一.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) N ...
- 03.Javascript——入门一些方法记录之Map和Set
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Number ...
- 03 Javascript的数据类型
数据类型包括:基本数据类型和引用数据类型 基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象. 当我们把变量赋值给一个变量时,解析器首先要确认的就是这个值是基本类型值还是引用类型值 ...
- javaScript基础-03 javascript语句
一. 声明语句 var和function都是声明语句.声明或定义变量或函数. var 声明一个或者多个变量.语法如下: var a ; var b = 1; var c, d; var e = 3; ...
- JavaScript基本入门03
目录 JavaScript 入门基础 03 JavaScript构造函数 常用事件和事件处理函数 小练习 数据类型之间的差异性 数组 介绍 创建 数组的常规使用 数组的length属性 数组当中常见的 ...
随机推荐
- 【Jmeter源码解读】002——程序入口类NewDriver.java
1.运行环境的检查 2.刚才初始化的 classloader 加载类 org.apache.jmeter.JMeter 然后通过 java 反射的方式来调用 org.apache.jmeter.JMe ...
- 【模板】C++高精度加法
所谓高精度加法就是对两个和可能会超过long long数据范围的数进行加法运算.这种情况下,显然不能使用常规的方法进行运算. 那么,不妨考虑一下人在纸上是如何进行加法运算的.当人进行加法运算时,通常会 ...
- # localhost 、217.0.0.1 、本机IP
localhost .217.0.0.1 .本机IP localhost是一个域名,性质跟 "www.baidu.com" 差不多,指向127.0.0.1这个IP地址,在windo ...
- __formart__
__format__ 一.__format__ 自定制格式化字符串 date_dic = { 'ymd': '{0.year}:{0.month}:{0.day}', 'dmy': '{0.day}/ ...
- S02_CH06_XADC实验
S02_CH06_XADC实验 6.1实验概述 这次借助zynq的内嵌的XADC来采集zynq内部的一些参数: •VCCINT:内部PL核心电压 •VCCAUX:辅助PL电压 •VREFP:XADC正 ...
- Go入门所踩过的坑：cannot find package "" in any of
问题:cannot find package "" in any of.现已按照博客解决,分享一种自己踩得坑欢迎大神指导交流! 首先使用go env查看当前环境变量,新手入门出现找 ...
- hdu 6069 Counting divisors 公式+区间筛
比赛的时候把公式扣出来了,,但是没有想到用筛法算公因子,,默默学习一下.. 题解:设n=p1^(c1)p2^{c2}...pm^{cm},n=p1^c1*p2^c2...p ...
- Ubuntu编写开机启动脚本
1 概述 服务器一般不可能百分之百不会挂,于是一般采用主备或者分布式来达到高可用. 挂掉的机器有很多处理策略,常用的就是重新启动,但是为了保证重启之后服务器能够恢复可用状态,需要配置开机启动脚本. 2 ...
- MVC授权不通过之后不执行任何自定义ActionFilter
如下一个Action [Authorize] [F1]//自定义过滤器,继承自ActionFilter public ActionResult Index() { return View(); } 如 ...
- JS 控制特殊字符
1.标签上直接替换方法: JS 控制不能输入特殊字符 1 <input type="text"class="domain"onkeyup="th ...