1.实现隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script>
window.onload=function(){
//1.获取table
var tabEle=document.getElementById("tab")
//2.获取表格中tbody中的行数的长度
var len=tabEle.tBodies[0].rows.length;
//3.对行数进行遍历，并对奇偶判断并赋予颜色
for(var i=0;i<len;i++){
if (i%2==0) {
tabEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
tabEle.tBodies[0].rows[i].style.backgroundColor="yellow";
}
}
}
</script>
</head>
<body>
<table border="1px" width="700px" height="400px" align="center" id="tab">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>19</td>
</tr>
<tr>
<td>5</td>
<td>钱七</td>
<td>26</td>
</tr>
<tr>
<td>6</td>
<td>田八</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>2.实现表格的高亮显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
<script>
function changeColor(id,flag) {
if(flag == 'over') {
document.getElementById(id).style.backgroundColor = "grey";
} else if(flag == 'out') {
document.getElementById(id).style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<table border="1px" width="700px" height="400px" align="center" id="tab">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')" id="tr1">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')" id="tr2">
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')" id="tr3">
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
<tr onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')" id="tr4">
<td>4</td>
<td>赵六</td>
<td>19</td>
</tr>
<tr onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')" id="tr5">
<td>5</td>
<td>钱七</td>
<td>26</td>
</tr>
<tr onmouseover="changeColor('tr6','over')" onmouseout="changeColor('tr6','out')" id="tr6">
<td>6</td>
<td>田八</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>3.JS常用的事件
onfocus onblur:聚焦离焦事件，用于表单校验的时候比较合适
onclick ondbclick:鼠标单击双击事件
onkeydown onkeypress:搜索引擎使用比较多
onload:页面加载事件，所有的其他事件都可以绑定到这个函数中去。html里面只能写一个
onmouseover onmouseout onmousemove:购物网站商品详情页
onsubmit:表单提交事件，有返回值，控制表单是否提交
onchange:当用户改变内容时使用这个事件（二级联动）
4.全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script>
function checkAll() {
//获取复选框
var checkAllEle = document.getElementById("checkAll");
//对复选框的状态进行判断
if(checkAllEle.checked == true) {
//获取下面的所有的复选框
var checkone = document.getElementsByName("checkOne");
//对复选框进行遍历
for(i = 0; i < checkone.length; i++)
checkone[i].checked = true;
}else{
//获取下面的所有的复选框
var checkone = document.getElementsByName("checkOne");
//对复选框进行遍历
for(i = 0; i < checkone.length; i++)
checkone[i].checked = false;
}
}
</script>
</head>
<body>
<table border="1px" width="700px" height="400px" align="center" id="tab">
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<td>全选<input type="checkbox" onclick="checkAll()" id="checkAll" /></td>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>4</td>
<td>赵六</td>
<td>19</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>5</td>
<td>钱七</td>
<td>26</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" /> </td>
<td>6</td>
<td>田八</td>
<td>25</td>
</tr>
</tbody>
</table>
</body>
</html>5.添加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>添加城市</title>
<script>
window.onload=function(){
document.getElementById("btn").onclick=function(){
//1.获取ul节点
var ulEle=document.getElementById("ul1");
//2.创建文本节点
var textNode=document.createTextNode("湖北");
//3.创建元素节点
var liEle=document.createElement("li");
//4.把文本节点添加到元素节点中
liEle.appendChild(textNode);
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="添加城市" />
<ul id="ul1">
<li>安徽</li>
<li>北京</li>
<li>上海</li>
</ul>
</body>
</html>
6.添加二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" href="css/rigst.css" />
<script>
//1.创建一个二维数组，用于存储城市
var cities = new Array(5);
cities[0] = new Array("合肥", "芜湖", "蚌埠", "淮南")
cities[1] = new Array("朝阳区", "海淀区", "通州区", "房山区")
cities[2] = new Array("松江区", "宝山区", "金山区", "嘉定区")
cities[3] = new Array("武汉市", "宜昌市", "襄樊市", " 荆州市")
cities[4] = new Array("苏州市", "徐州市", "盐城市", "无锡市")
function changeCity(val) {
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的内容
cityEle.options.length = 0;
//2.遍历数组中的省份
for(var i = 0; i < cities.length; i++) {
if(val == i) {
//3.遍历用户选择省份下的城市
for(var j = 0; j < cities[i].length; j++) {
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j])
//5.创建元素节点
var EleNode = document.createElement("option")
//6.将文本节点放入元素节点中
EleNode.appendChild(textNode);
//8.将元素节点添加到第二个下拉下表中
cityEle.appendChild(EleNode);
}
}
}
}
</script>
</head>
<body>
<div id="father">
<!--头部部分-->
<div id="head">
<div class="head1" id="head1"><img src="img/云顶logo.png" width="140px" height="120px" /> </div>
<div class="head1" id="head2"></div>
<div class="head1" style="float: right;margin-top: 15px;">
<a href="#">
<font size="4" class="head11">登录</font>
</a>
<a href="#">
<font size="4" class="head11">注册</font>
</a>
<a href="#">
<font size="4" class="head11">购物车</font>
</a>
</div>
</div>
<!--导航部分-->
<div id="nav" style="margin-left: 140px;">
<a href="#">
<font size="6" class="nav1">首页</font>
</a>
<a href="#">
<font size="4" class="nav1">品牌手机</font>
</a>
<a href="#">
<font size="4" class="nav1">品牌电脑</font>
</a>
<a href="#">
<font size="4" class="nav1">电脑配件</font>
</a>
<a href="#">
<font size="4" class="nav1">手机配件</font>
</a>
<a href="#">
<font size="4" class="nav1">宽带办理</font>
</a>
<a href="#">
<font size="4" class="nav1">套餐开卡</font>
</a>
</div>
<br />
<!--登录页面-->
<div id="rigst">
<br />
<br />
<br/>
<br/>
<form action="#" method="get" onsubmit="return CheckForm()">
<table align="center" width="800px" height="500px" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2">
<font size="4" color="darkblue">会员注册</font> USER REGISTER</td>
</tr>
<tr>
<td align="center"><b>用户名</b></td>
<td><input type="text" name="username" id="username" style="line-height: 30px;" placeholder="请输入用户名" size="50px" onfocus="onfocusTest('username','用户名必填！')" onblur="check('username','用户名不能为空！')" /><span id="usernamespan"></span></td>
</tr>
<tr>
<td align="center"><b>密码</b></td>
<td><input type="password" name="password" id="password" style="line-height: 30px;" placeholder="请输入密码" size="50px" onfocus="onfocusTest('password','密码必填！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span></td>
</tr>
<tr>
<td align="center"><b>确认密码</b></td>
<td><input type="password" name="repassword" id="repassword" style="line-height: 30px;" placeholder="请输入确认密码" size="50px" onfocus="onfocusTest('repassword','请确认密码！')" onblur="repwd()" /><span id="repasswordspan"></span></td>
</tr>
<tr>
<td align="center"><b>Email</b></td>
<td><input type="email" name="email" id="email" style="line-height: 30px;" placeholder="Email" size="50px" onfocus="onfocusTest('email','邮箱必填！')" onblur="emailCheck()" /><span id="emailspan"></span></td>
</tr>
<tr>
<td align="center"><b>姓名</b></td>
<td><input type="text" name="name" id="name" style="line-height: 30px;" placeholder="请输入姓名" size="50px" onfocus="onfocusTest('name','姓名必填！')" onblur="check('name','姓名不能为空！')" /><span id="namespan"></span></td>
</tr>
<tr>
<td align="center"><b>籍贯</b></td>
<td>
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">安徽</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">湖北</option>
<option value="4">江苏</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td align="center"><b>性别</b></td>
<td><input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>
<tr>
<td align="center"><b>出生日期</b></td>
<td><input type="date" name="birthday" style="line-height: 30px; " placeholder="年\月\日" /> </td>
</tr>
<tr>
<td align="center"><b>验证码</b></td>
<td><input type="text" name="yzm" id="yanzhengma" style="line-height: 30px;" size="20px" id="yanzhengma" onfocus="onfocusTest('yanzhengma','验证码必填！')" onblur="check('yanzhengma','验证码不能为空！')" /> <img src="img/yanzhengma.png" width="60px" height="30px" /> <span id="yanzhengmaspan"></span></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" style="background: url(img/register.gif);width: 90px; height: 40px;color: white;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<br />
<br />
<!--帮助中心-->
<div id="help">
</div>
<br />
<!--版权所有-->
<div id="copyright" align="center">
<a href="#">
<font size="4">关于我们</font>
</a>
<a href="#">
<font size="4">联系我们</font>
</a>
<a href="#">
<font size="4">招贤纳士</font>
</a>
<a href="#">
<font size="4">法律声明</font>
</a>
<a href="#">
<font size="4">友情链接</font>
</a>
<a href="#">
<font size="4">支付方式</font>
</a>
<a href="#">
<font size="4">配送方式</font>
</a>
<a href="#">
<font size="4">服务声明</font>
</a>
<a href="#">
<font size="4">广告声明</font>
</a>
<br/>
<br/>
<font size="4">Copyright © 2018-2028 云顶商城 版权所有</font>
</div>
</div>
<script src="js/页面校验.js"></script>
</body>
</html>
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
