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属性 数组当中常见的 ...
随机推荐
- 最长回文 HDU - 3068（马拉车算法）
Problem Description 给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 回文就是正反读都是一样的字符串,如aba, abba等 Input 输入 ...
- CSP/NOIP c++常用模板
蒟蒻目前还是提高组选手,模板将会持续更新! 目录: 线段树 对拍 exgcd st 树状数组 树剖 dijsktra spfa tarjan 匈牙利 埃筛 差分树状数组 dinic 快速幂取余 Exg ...
- Photon Server LoadBalancing搭建
准备:申请3台Windows虚拟机. 3台虚拟机上都部署上Photon Server. 一.主虚拟机上部署MasterServer. (1)在第一台虚拟机中,部署的Photon Server目目录下找 ...
- centos8自定义目录安装php7.3
1.目录结构 源码目录:/home/werben/pkgsrc/php-7.3.11 安装目录:/home/werben/application/php7.3.11 2.下载php源码 # 官网地址: ...
- axios 跨域携带cookie设置
import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, ...
- Python中的math常用方法总结（转）http://www.cnblogs.com/renpingsheng/p/7171950.html
python中math模块常用的方法整理 ceil:取大于等于x的最小的整数值,如果x是一个整数,则返回x copysign:把y的正负号加到x前面,可以使用0 cos:求x的余弦,x必须是弧度 ...
- Pattern Recognition and Machine Learning-02-1.0-Introduction
Introduction The problem of searching for patterns in data is a fundamental one and has a long and s ...
- Redis笔记一
REmote DIctionary Server 是一个开源.内存存储的数据结构服务器,可以用作数据库来存储key-value数据,支持字符串,哈希表,列表,集合,位图,地理空间信息等数据类型,同时也 ...
- Webpack4 splitChunks配置，代码分离逻辑
博客不知道啥时候写的了,一直在草稿箱没写完,突然感觉今年过去大半了,又没怎么写博客.写写完,有始有终 1.代码分离升级 原来项目代码分离是通过下面的配置,基于bundle-loader插件,通过rou ...
- LLVM新建全局变量
在LLVM中,有原生的AST Clone,却没有一个比较好的Stmt copy功能,基于Scout在LLVM上进行的修改,我们实现了自己的Stmt Clone功能. 要进行Stmt Clone,肯定需 ...