<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#bodyDiv{
border:1px solid blue;
width:90%;
}
.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;
}
#menuDiv a{
font-size: 20px;
color: white;
}
.productClass{
width:100%;
border:1px solid blue;
}
.contentClass{
width:100%;
border:1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
}
</style>
<script>
var time;
window.onload = function() {
time = window.setInterval("show()", 5000);
// 设置定时
window.setInterval("changeImg()", 5000);
}
// 图片轮播效果的方法
var i = 1;
function changeImg(){
// alert("aaaa");
i++;
// 获得图片的控制权
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/" + i + ".jpg";
}
// 显示广告的方法
function show() {
// 获得广告的div元素
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "block";
window.clearInterval(time); // 清空掉之前设置的定时
time = window.setInterval("hide()", 5000); // 重新再设置一个定时
}
// 隐藏广告的方法
function hide() {
// 获得广告的div元素
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>
<!-- logo的DIV -->
<div>
<div class="logoDiv">
<img src="../img/logo2.png" height="48">
</div>
<div class="logoDiv">
<img src="../img/header.png" height="48">
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!-- Menu的DIV -->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!-- 图片滚动的DIV -->
<div id="imgDiv">
<img id="img1" src="../img/1.jpg" width="100%">
</div>
<!-- 热门商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>热门商品</font><img src="../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="../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="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 广告的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/ad.jpg" width="100%" height="80">
</div>
<!-- 最新商品的DIV -->
<div class="productClass">
<!-- 文字部分的DIV -->
<div class="contentClass">
<font>最新商品</font><img src="../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="../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="../img/middle01.jpg" width="100%" height="100%">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
<div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
<div style="border:1px solid blue;width:16%;float:left;height:228px;">
<img src="../img/small03.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- 页脚的DIV -->
<div style="width:100%;border:1px solid blue;">
<img src="../img/footer.jpg" width="100%">
</div>
<!-- 友情链接及版权的DIV -->
<div style="width:100%;border:1px solid blue;">
<center>
关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/>
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</div>
</body>
</html>
教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果
需积分: 10 70 浏览量
2017-05-05
22:43:11
上传
评论
收藏 911KB 7Z 举报
教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果.7z （50个子文件） 
JSDemo 
.project 968B
index.html 144B 案例一：使用JS实现图片滚动效果 demo 01-Window对象的定时操作.html 326B 案例一：使用JS实现图片滚动效果.html 6KB 案例二：使用JS定时弹出广告 案例二：使用JS定时弹出广告.html 7KB demo 02-JS的BOM对象一.html 725B 03-JS的BOM对象二.html 761B 04-JS的BOM对象三.html 269B img 
small09.jpg 6KB small02.jpg 7KB big01.jpg 15KB okwu-athletics.jpg 199KB 2.jpg 164KB header.jpg 6KB okwu.jpg 196KB small08.jpg 7KB small06.jpg 4KB f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg 81KB footer.jpg 24KB 1.jpg 142KB small07.jpg 17KB
logo.gif 3KB small01.jpg 5KB title2.jpg 2KB small04.jpg 9KB ad.jpg 38KB regist_bg.jpg 28KB small03.jpg 5KB small05.jpg 5KB emancipation.jpg 164KB bartlesvillecf.jpg 142KB middle01.jpg 34KB
header.png 12KB 3.jpg 196KB logo2.png 8KB 案例三：使用JS完成表单的提示和校验 案例三：使用JS完成表单的简单的数据校验.html 5KB js check.js 987B 案例五：使用JS完成复选框的全选和全不选 demo 01-DOM对象的操作一.html 600B data.html 3KB right.html 164B top.html 175B left.html 263B 案例五：网站后台页面的显示.html 305B 案例三：使用JS完成注册页面的简单校验 案例三：使用JS完成表单的简单的数据校验.html 3KB css main.css 224B 案例四：使用JS完成表格的隔行换色 案例四：网站后台页面的显示.html 305B data.html 3KB right.html 164B top.html 175B left.html 263B资源评论
李阿昀
- 粉丝: 1w+
- 资源: 44
