当前位置:
首页 > 网站开发 > JavaScript >
-
JavaScript教程之大项目之网上书城（三）——主页
大项目之网上书城（三）——主页（中）
尽量日更，我发现我还要写的东西有好多啊。
主要改动
设计这个勉强看得过去的颜色，填充之前的主页，按照之前的思路，左边是图书分类，中间一个轮播图，然后右边是一个文案广告，加一个热销书推荐，下面是新书推荐，然后下面的右面是新书排行榜。因为我打算把网页弄成动态的，于是热销书推荐，新书推荐，新书排行榜，都要是通过js+servlet来从数据库获取最新数据，写起来会非常麻烦啊。（以及我还没有数据库，我还没有dao，没有BookBean，没有service，于是测试起来超麻烦啊。就只给热销书推荐写了个简单的测试。新书推荐因为涉及到图片，我不太了解，还在发展科技树，真的很艰巨啊。再加上我意识到我要设计一下通用的图书详情页面，我要增加个超级用户。超级用户要可以修改数据库，啊，真的好难啊。任重而道远。）
1.主页持续施工中
代码
真实任重而道远，这里同样加了bootstrap的代码，用来显示按钮。。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
li{
float:left;
width:100%;
height:10%;
font-size:16px;
color:#8deeee;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/index.js"></script>
<title>主页</title>
</head>
<body style="background-color:#bbb">
<!-- 调用头部页面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="width:70%;height:886px;float:left;margin-left:15%;">
<!-- 二级导航 -->
<jsp:include page="/client/head2.jsp"></jsp:include>
<!-- 图书分类and轮播图and文案and热门推荐and新书上架and新书榜 -->
<div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#bbb;">
<!-- 图书分类 -->
<div style="width:23%;height:100%;float:left;background-color:#a8f;">
<div style="width:100%;height:6%;text-align:center;line-height:45px;background-color:#556B2F">
<font color="#ddd" style="font-size:20px;">图书分类</font>
</div>
<div style="width:100%;height:94%;text-align:center;line-height:45px;background-color:#548B54">
<ul style="width:100%;height:100%;text-align:left;">
<li>
<a href="${pageContext.request.contextPath }/client/pai/index.jsp">好书拍卖</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/net_literature/index.jsp">网络文学</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/clothing/index.jsp">服装</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/sport/index.jsp">运动户外</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/nursery/index.jsp">孕婴童</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/nursery/index.jsp">孕婴童</a>
</li>
<li>
<a href="${pageContext.request.contextPath }/client/food/index.jsp">食品</a>
</li>
<li>
<a href="#">暂无分类</a>
</li>
<li>
<a href="#">暂无分类</a>
</li>
<li>
<a href="#">暂无分类</a>
</li>
</ul>
</div>
</div>
<!-- 轮播图 -->
<div style="width:50%;height:35%;float:left;margin-left:2%;background-size:100% 100%;"id="lun">
<!-- table按钮沉底大法！ -->
<table style="width:100%;height:100%">
<tr>
<td style="vertical-align:bottom;">
<button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:60%;" id="l1">1</button>
<button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l2">2</button>
<button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l3">3</button>
<button class="btn btn-warning" style="width:30px;height:30px;float:left;margin-left:2%;" id="l4">4</button>
</td>
</tr>
</table>
</div>
<!-- 文案and热门推荐 -->
<div style="width:23%;height:35%;float:left;background-color:#bbb;margin-left:2%">
<!-- 文案 -->
<div style="width:100%;height:30%;float:left;background-color:#548B54;">
<font style="font-size:20px;text-align:center;display:block;width:100%;color:#ee4000">618年中狂欢</font>
<font style="display:block;color:#eead0e">十万童书，每满100减50</font>
<font style="display:block;color:#eead0e">艺术绘画，每满100减50</font>
</div>
<!-- 热门推荐 -->
<div style="width:100%;height:64%;float:left;background-color:#a8f;margin-top:8%">
<div style="width:100%;height:25%;text-align:center;line-height:45px;background-color:#556B2F">
<font color="#ddd" style="font-size:20px;">热门推荐</font>
</div>
<div style="width:100%;height:75%;text-align:center;line-height:45px;background-color:#548B54;margin-top:-5%;">
<ul>
<li id="a1" style="text-align:left;color:black"></li>
<li id="a2" style="text-align:left;color:black"></li>
</ul>
<div style="width:100%;height:20%;float:left;margin-top:5%">
<button class="btn btn-info" style="float:left;margin-left:20%;font-size:8px;"id="b1">1</button>
<button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b2">2</button>
<button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b3">3</button>
<button class="btn btn-info" style="float:left;margin-left:4%;font-size:8px;"id="b4">4</button>
</div>
</div>
</div>
</div>
<!-- 新书上架 -->
<div style="width:50%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;"id="xinShu">
<table border="1"style="width:100%;height:100%">
<tr>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=1" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu1">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=2" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu2">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=3" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu3">图书</font>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:94%;height:80%;background-color:white;float:left;margin-left:3%">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=4" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu4">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=5" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu5">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=6" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu6">图书</font>
</div>
</td>
</tr>
<tr>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=7" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu7">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=8" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu8">图书</font>
</div>
</td>
<td>
<div style="width:94%;height:80%;background-color:white;margin-left:3%;float:left">
<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=9" style="width:100%;height:100%;"/>
</div>
<div style="width:94%;float:left;margin-left:3%;height:15%;">
<font style="font-size:16px;margin-left:3%;"id="shu9">图书</font>
</div>
</td>
</tr>
</table>
</div>
<!-- 新书榜 -->
<div style="width:23%;height:63%;float:left;background-color:#a8f;margin-left:2%;margin-top:2%;">
<div style="width:100%;height:10%;text-align:center;line-height:45px;background-color:#556B2F">
<font color="#ddd" style="font-size:20px;">新书排行榜</font>
</div>
<div style="width:100%;height:90%;text-align:center;line-height:45px;background-color:#548B54;margin-top:-5%;">
<ul>
<li id="x1" style="text-align:left;color:black"></li>
<li id="x2" style="text-align:left;color:black"></li>
<li id="x3" style="text-align:left;color:black"></li>
<li id="x4" style="text-align:left;color:black"></li>
<li id="x5" style="text-align:left;color:black"></li>
<li id="x6" style="text-align:left;color:black"></li>
<li id="x7" style="text-align:left;color:black"></li>
<li id="x8" style="text-align:left;color:black"></li>
<li id="x9" style="text-align:left;color:black"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 调用底部页面 -->
<div style="width:100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>
效果图
2.index.js
代码
$(function(){
//动态显示初始轮播图
$("#lun").css("background-image","Url('img/tu1.jpg')");
//通过点击切换轮播图
$("#l1").click(function(){
$("#lun").css("background-image","Url('img/tu1.jpg')");
});
$("#l2").click(function(){
$("#lun").css("background-image","Url('img/tu2.jpg')");
});
$("#l3").click(function(){
$("#lun").css("background-image","Url('img/tu3.jpg')");
});
$("#l4").click(function(){
$("#lun").css("background-image","Url('img/tu4.jpg')");
});
//动态显示初始热门书
$.post("../ReMen?page=1",function(data){
var code=data;
code=code.split("#");
$("#a1").html(code[0]);
$("#a2").html(code[1]);
});
//动态显示初始新书和初始新书榜
for(var i = 1;i < 10;++i){
var servlet="../XinShuMing?shu="+i;
$.post(servlet,function(data){
var shu = "#shu" + i;
var xin = "#x" + i;
$(shu).html(data);
$(xin).html(data);
});
};
//通过点击b5,b6,b7,b8,将前1到36展示在页面上。
$("#b5").click(function(){
for(var i = 1;i < 10;++i){
var servlet="../XinShuMing?shu="+i;
$.post(servlet,function(data){
var xin = "#x" + i;
$(xin).html(data);
});
};
});
$("#b6").click(function(){
for(var i = 10;i < 19;++i){
var servlet="../XinShuMing?shu="+i;
$.post(servlet,function(data){
var j = i - 9;
var xin = "#x" + j;
$(xin).html(data);
});
};
});
$("#b7").click(function(){
for(var i = 19;i < 28;++i){
var servlet="../XinShuMing?shu="+i;
$.post(servlet,function(data){
var j = i - 18;
var xin = "#x" + i;
$(xin).html(data);
});
};
});
$("#b8").click(function(){
for(var i = 28;i < 37;++i){
var servlet="../XinShuMing?shu="+i;
$.post(servlet,function(data){
var j = i - 27;
var
栏目列表
最新更新
python爬虫及其可视化
使用python爬取豆瓣电影短评评论内容
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀（爬取学校通知公告）
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求：requests模块基础使用必知必会
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析：SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL，这些神奇的特性你知道吗？
openGauss内核分析：执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
uniapp/H5 获取手机桌面壁纸 (静态壁纸）
[前端] DNS解析与优化
为什么在js中需要添加addEventListener（）？
JS模块化系统
js通过Object.defineProperty() 定义和控制对象
这是目前我见过最好的跨域解决方案！
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比