教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色资源-CSDN文库

共44个文件

jpg：24个

html：14个

png：2个

JavaScript

需积分: 32 113 浏览量 2017-05-04 22:41:44 上传评论收藏 910KB 7Z 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源推荐

资源详情

资源评论

收起资源包目录

教你一天玩转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

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

<!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 id="bodyDiv"> <div id="adDiv" style="width: 100%; display: none;"> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" /> </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>  <div id="menuDiv"> <a href="">首页</a>   <a href="">电脑办公</a>   <a href="">手机数码</a>   <a href="">烟酒糖茶</a>   </div>  <div id="imgDiv"> <img id="img1" src="../img/1.jpg" width="100%"> </div>  <div class="productClass">  <div class="contentClass"> <font>热门商品</font><img src="../img/title2.jpg"> </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 style="width:100%;border:1px solid blue;"> <img src="../img/ad.jpg" width="100%" height="80"> </div>  <div class="productClass">  <div class="contentClass"> <font>最新商品</font><img src="../img/title2.jpg"> </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 style="width:100%;border:1px solid blue;"> <img src="../img/footer.jpg" width="100%"> </div>  <div style="width:100%;border:1px solid blue;"> <center> 关于我们联系我们招贤纳士法律声明友情链接支付方式配送方式服务声明广告声明 <br/> Copyright © 2005-2016 传智商城版权所有 </center> </div> </div> </body> </html>

评论收藏

内容反馈