web-day03
# 使用JS完成图片轮播效果
# 使用JS完成页面定时弹出广告
# 使用JS完成表单的校验
# 使用JS完成表格的隔行换色
# 使用JS完成复选框的全选效果
# 使用JS完成省市联动效果
##图片轮播
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*function setTime(){
window.setInterval("alert('aaa')",3000);
}*/
//匿名函数
window.onload=function(){
window.setInterval("change()",3000)
}
var i=1;
function change(){
i++;
if(i>3){
i=1;
}
var imge=document.getElementById("image")
imge.src="../img/img/"+i+".jpg"
}
</script>
</head>
<body >
//步骤一创建html文件
//步骤二页面加载使用onload事件
//步骤三出发函数setTime()
//步骤四获得图片的控制权
//修改图片的src属性
<table>
<tr>
<td>
<img id="image" src="../img/img/1.jpg"/>
</td>
</tr>
<!--<tr>
<td>
<img src="../img/img/middle01.jpg"/>
</td>
</tr>-->
</table>
</body>
</html>
```
##页面定时弹出广告(无限循环)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var time;
window.onload=function(){
time=window.setInterval("show()",2000)
}
//显示图片
function show(){
var adDiv=document.getElementById("adDiv")
adDiv.style.display="block"
clearInterval(time)
setInterval("hide()",2000)
}
//隐藏图片
function hide(){
var adDiv=document.getElementById("adDiv")
adDiv.style.display="none"
clearInterval(time)
setInterval("show()",2000)
}
</script>
</head>
<body>
<div id="adDiv" style="display: none;">
<img src="../img/img/ad.jpg"/>
</div>
<div>
<img src="../img/img/1.jpg"/>
</div>
</body>
</html>
```
##表单校验(表单中的必要属性 type name id-----name是后台需要的 id是前台需要的 type是基本的属性类型)
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkForm() {
var username = document.getElementById("username").value
if(username == "") {
//alert("用户名不能为空");
var sp=document.getElementById("sp")
sp.innerHTML="<font color='red'>用户名不能为空</font>"
return false;
}
var password=document.getElementById("mima").value
if(password==""){
return false;
}
return true;
}
</script>
<script>
function tips(){
var sp=document.getElementById("sp")
sp.innerHTML="<font color='red'>用户名必须字母开头</font>"
}
</script>
</head>
<body>
<table border="1px" width="90%">
<!--<tr>
<td>
<img src="../img/img/header.png"/>
</td>
</tr>
<tr>
<td>
<img src="../img/img/2.jpg"/>
</td>
</tr>-->
<tr>
<td>
<img src="../img/img/ad.jpg" />
</td>
</tr>
<tr>
<td>
<form action="../JS和CSS/定时弹出广告.html" method="get">
<table width="40%" align="center" height="500">
<tr>
<td>用户名</td>
<td>
<input type="text" class="requide" name="aaa" id="username"/>
<span id="sp"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" class="requide" id="mima" />
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" class="requide" id="el" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="provice">
<option value="请选择">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select>
<select name="city">
<option value="请选择">请选择</option>
<option value="石家庄">石家庄</option>
<option value="保定">保定</option>
<option value="廊坊">廊坊</option>
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<!--记得加上name属性,这样会同属一组,单选选项必须在同一组中-->
<input type="radio" name="radio" value="男" checked="checked"/>男
<input type="radio"name="radio" />女
</td>
</tr>
<tr>
<td>提交</td>
<td>
<input type="submit" value="提交" />
</td>
</tr>
<tr>
<td>重置</td>
<td>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
```
```html
【步骤一】创建一个html文档
【步骤二】在要去校验的文本框上添加事件.
【步骤三】触发函数
【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.
1.4.3 代码实现:
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;
}
}
JS的事件的总结：
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown :
* onkeyup :
* onkeypress:
鼠标操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup
```
##隔行换色
###技术分析
```html
var tab1=document.getElementById("tab1")//获得对象控制权
var len=tab1.rows.length//获得该表格的行数
其中,tab1.rows方法是获得一个表格的行数数组
```
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var tab1=document.getElementById("tab1")
var len=tab1.rows.length
for(var i=0;i<len;i++){
if(i%2==0){
tab1.rows.style.backgroundColor="red"
}else{
tab1.rows.style.backgroundColor="yellow"
}
}
}
</script>
</head>
<body>
<!--1.5.2.2 步骤分析：
【步骤一】创建一个HTML页面：可以使用后台设计页面.
【步骤二】确定事件：onload事件.
【步骤三】触发一个函数.在这个函数中获得操作的表格.
【步骤四】获得表格中的所有的行数.
【步骤五】遍历表格的行数.
【步骤六】判断是否是奇数行还是偶数行
-->
<!--插入表格 六行四列-->
<table border="1px" align="center" width="50%" id="tab1">
<tr>
<td align="center"><b>分类的ID</b></td>
<td align="center"><b>分类的名称</b></td>
<<td align="center"><b>分类的描述</b></td>
<td align="center"><b>分类的操作</b></td>
</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>
<tr>
<td>5</td>
<td>汽车用品</td>
<td>汽车用品</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
```
##表格复选框的全选和全不选
```html
1.6.2.2 步骤分析：
【步骤一】创建一个HTML页面.
【步骤二】确定事件：复选框的单击事件.
【步骤三】触发一个函数
【步骤四】在函数中,获得上面的复选框是否被选中.
【步骤五】如果选中,下面的所有的复选框都被选中.
【步骤六】如果不选中,下面的所有的复选框都不选中.
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.checked = true;
}
}else{
// 上面复选框没有被选中：获得下面所有的复选框,修改checked属性
for(var i = 0 ;i<ids.length;i++){
ids.checked = false;
}
}
}
```
```html
DOM的常用的操作】
获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点：
* element.removeChild(); -- 删除元素
```
省市联动
```html
1.7.2.1 技术分析:
【JS中创建数组】
【JS的事件】
下拉的列表的改变的事件.onchange.
【JS的DOM的操作】
创建元素：
添加元素：
1.7.2.2 步骤分析
【步骤一】创建一个HTML文件.
【步骤二】确定事件：onchange事件.
【步骤三】触发函数,在函数中编写代码.
【步骤四】获得到所选择的省份的信息.
【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.
【步骤六】遍历数组中的市的信息.
【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.
1.7.3 代码实现:
// 定义数组：二维数组：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");
function changeCity(value){
// 获得到选中的省份的信息.
var city = document.getElementById("city");
// 清除第二个列表中的内容:
for(var i=city.options.length;i>0;i--){
city.options = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 获得所有的市的信息.
for(var j=0;j<arrs.length;j++){
// alert(arrs[j]);
// 创建元素：
var opEl = document.createElement("option");// <option></option>
// 创建文本节点:
var textNode = document.createTextNode(arrs[j]);
// 将文本的内容添加到option元素中.
opEl.appendChild(textNode);
// 将option的元素添加到第二个列表中.
city.appendChild(opEl);
}
}
}
}
```
|
|
收藏
淘帖
踩
