<!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完成后台数据展示表格的隔行换色
需积分: 32 23 浏览量
2017-05-04
22:41:44
上传
评论
收藏 910KB 7Z 举报
教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色.7z （44个子文件） 
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完成注册页面的简单校验 案例三：使用JS完成表单的简单的数据校验.html 3KB css main.css 224B 案例四：使用JS完成表格的隔行换色 案例四：网站后台页面的显示.html 305B data.html 3KB right.html 164B top.html 175B left.html 263B资源评论
