03 JavaScript的使用
2024-09-05 08:32:41
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>
最新文章
- Python+excel实现的简单接口自动化 V0.1
- Install Sogoupinyin in Ubuntu
- CSS动态伪类选择器温故-3
- java 5 ReadWriteLock
- win7如何快速设置开机启动项?
- BZOJ 1025: [SCOI2009]游戏( 背包dp )
- 《Django By Example》第八章 中文 翻译 （个人学习，渣翻）
- static 与final abstract关键字
- redis多实例
- CF 833B
- awk命令的基本使用
- javascript 问题
- eFrameWork学习笔记-eList
- tensorflow c++接口的编译安装与一些问题记录
- SQL Server临时表的使用方案
- CentOS 7 Update GCC G++
- Yii2-核心框架代码规范
- linux 网络性能优化
- socket socket讲解
- DPDK的代码规范
热门文章
- VMWare虚拟机15.X局域网网络配置(修改网卡)
- codeforces 1244E Minimizing Difference （贪心）
- LC 599. Minimum Index Sum of Two Lists
- MySQL 按照日期格式查询带有时间戳数据
- 操作系统diy-1-资料整理
- Nginx安装启动过程报错libpcre.so.1 cannot open shared object file: No such file or directory
- Thread 和 Runnable
- 怎样设置Cookie
- mvc 登陆界面+后台代码
- springCloud的feign异常:RequestHeader参数为空时，对key加了大括号{}