You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
502 lines
8.7 KiB
502 lines
8.7 KiB
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
|
|
<%
|
|
String path = request.getContextPath();
|
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
|
%>
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html>
|
|
<head>
|
|
<base href="<%=basePath%>">
|
|
|
|
<title>My JSP 'lost.jsp' starting page</title>
|
|
|
|
<meta http-equiv="pragma" content="no-cache">
|
|
<meta http-equiv="cache-control" content="no-cache">
|
|
<meta http-equiv="expires" content="0">
|
|
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
|
|
<meta http-equiv="description" content="This is my page">
|
|
<!--
|
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
|
-->
|
|
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<style>
|
|
*::selection{
|
|
background: none;
|
|
}
|
|
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body{
|
|
width:1520px;
|
|
position:relative;
|
|
background: #F5F5F5;
|
|
}
|
|
.back{
|
|
width:1520px;
|
|
z-index: -1;
|
|
position: absolute;
|
|
}
|
|
.newheader{
|
|
height: 60px;
|
|
background-color: #00CD66;
|
|
width:1520px;
|
|
position: fixed;
|
|
z-index: 110;
|
|
top:0;
|
|
|
|
}
|
|
.head-nav{
|
|
height: 60px;
|
|
color: yellow;
|
|
position:relative;
|
|
left:-20px;
|
|
}
|
|
.head-nav #header-nav{
|
|
height: 60px;
|
|
color: yellow;
|
|
margin-top:0;
|
|
}
|
|
.logo{
|
|
|
|
}
|
|
.logo img{
|
|
height: 60px;
|
|
width: 60px;
|
|
float: left;
|
|
margin: auto 20px;
|
|
position:relative;
|
|
top:-15px;
|
|
}
|
|
.pr{
|
|
float: left;
|
|
margin: auto 10px;
|
|
}
|
|
.pr a{
|
|
color: white;
|
|
text-decoration: none;
|
|
position:relative;
|
|
top:20px;
|
|
|
|
}
|
|
.login{
|
|
height:60px;
|
|
}
|
|
.color-white{
|
|
margin: 10px 10px 10px 10px;
|
|
}
|
|
.mr5{
|
|
position:relative;
|
|
bottom: -20px;
|
|
}
|
|
body{
|
|
background-repeat: no-repeat;
|
|
background-size:cover;
|
|
background-position: 0 60px;
|
|
|
|
}
|
|
</style>
|
|
|
|
<img class="back" alt="" src="./img/tzsc.png">
|
|
|
|
|
|
<div class="newheader">
|
|
<div class="head-nav pr" id="head-navpre1">
|
|
<ul id="header-nav">
|
|
<a class="logo">
|
|
<img alt="" src="./img/sLogo.png" >
|
|
</a>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/paths" >跳蚤市场</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/courses" >校园超市</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/shixuns">失物招领</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/competitions">资源共享</a>
|
|
</li>
|
|
<li class="pr" style="display: block;">
|
|
<a href="/moop_cases">兴趣论坛</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<span class="login pr" style="float: right;">
|
|
<a href="./Login/login.jsp" class="mr5 color-white" >登录</a>
|
|
<em class="vertical-line" ></em>
|
|
<a href="/register" class="mr5 color-white">注册</a>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 以上导航 -->
|
|
|
|
|
|
|
|
|
|
<!-- 以下两大类别 -->
|
|
|
|
|
|
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.twobord{
|
|
position:absolute;
|
|
height: 100px;
|
|
top:600px;
|
|
width:1520px;
|
|
}
|
|
.twotypes{
|
|
position:absolute;
|
|
width:1000px;
|
|
height: 100px;
|
|
left:260px;
|
|
text-align: center;
|
|
}
|
|
.chose{
|
|
height:100px;
|
|
float:left;
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
.chose1{
|
|
width:400px;
|
|
z-index:11;
|
|
left:50px;
|
|
cursor: pointer;
|
|
}
|
|
.chose2{
|
|
width:370px;
|
|
right: 50px;
|
|
position: absolute;
|
|
z-index: 11;
|
|
cursor: pointer;
|
|
}
|
|
.chose div{
|
|
position:absolute;
|
|
width: 300px;
|
|
height:100px;
|
|
display: inline-block;
|
|
float: left;
|
|
left:100px;
|
|
background: rgba(5,5,5,0);
|
|
}
|
|
.chose img{
|
|
position:absolute;
|
|
width:100px;
|
|
display: inline-block;
|
|
left:0px;
|
|
float: left;
|
|
top:0px;
|
|
height:100px;
|
|
|
|
}
|
|
.chose p{
|
|
text-align: left;
|
|
text-indent: 10px;
|
|
z-index: 10;
|
|
}
|
|
.chose div p:FIRST-CHILD {
|
|
margin-top: 10px;
|
|
font-size: 30px;
|
|
} .chose div p:LAST-CHILD{
|
|
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="twobord">
|
|
<div class="twotypes">
|
|
<div class=" chose chose1" onclick="tiao()">
|
|
<img alt="" src="./img/look.png" >
|
|
<div>
|
|
<p > 查看招领</p>
|
|
<p >逛市场可以赚大钱哦~</p>
|
|
</div>
|
|
</div>
|
|
<div class="chose chose2" onclick="tiao()">
|
|
<img alt="" src="./img/fabu.png">
|
|
<div>
|
|
<p>发布寻物</p>
|
|
<p>逛市场可以赚大钱哦~</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function tiao(){
|
|
window.location.href='http://www.baidu.com';
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- 商品列表 -->
|
|
|
|
|
|
<style>
|
|
.qg{
|
|
position:relative;
|
|
border: 1px solid white ;
|
|
width:1000px;
|
|
height:auto ;
|
|
margin :10px auto;
|
|
top:150px;
|
|
}
|
|
.ul{
|
|
border: 1px solid black ;
|
|
width:1000px;
|
|
height:200px;
|
|
}
|
|
.li{
|
|
border: 1px solid yellow ;
|
|
width:100%;
|
|
height: 100%;
|
|
list-style: none;
|
|
padding: 0;
|
|
position:relative;
|
|
margin-bottom:10px;
|
|
background: white;
|
|
}
|
|
.info{
|
|
border: 1px solid red ;
|
|
width:700px;
|
|
height: 200px;
|
|
display: inline-block;
|
|
position: relative;
|
|
bottom: 20px;
|
|
}
|
|
.li img{
|
|
position:relative;
|
|
left:25px;
|
|
border: 1px solid black ;
|
|
width:250px;
|
|
height: 150px;
|
|
top:20px;
|
|
}
|
|
.dul{
|
|
border: 1px solid white ;
|
|
position: relative;
|
|
top:10px;
|
|
}
|
|
.dclass{
|
|
border: 1px solid black ;
|
|
list-style: none;
|
|
position: relative;
|
|
height:40px;
|
|
margin-top:10px;
|
|
}
|
|
</style>
|
|
|
|
<%
|
|
int a[]={1,2,3,4,5};
|
|
request.setAttribute("name", a);
|
|
%>
|
|
|
|
<div class="qg">
|
|
<ul class="ul">
|
|
<c:forEach items="${name}" var="val" >
|
|
<li class="li" onclick="qiu(${val})">
|
|
|
|
<div class="info">
|
|
|
|
<ul class="dul">
|
|
<li class="dclass dcone">查看闲置</li>
|
|
<li class="dclass dctwo">逛市场可以赚大钱哦~</li>
|
|
<li class="dclass dcthree">发布求购</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<img>
|
|
|
|
</li>
|
|
</c:forEach>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function qiu(id){
|
|
window.location.href="http://www.baidu.com";
|
|
|
|
//window.location.href='./Home/index.jsp?id='+id;
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
.pagination{
|
|
position:relative;
|
|
text-align: center;
|
|
top:1050px;
|
|
z-index: 2;
|
|
}
|
|
.pagination ul li{
|
|
position: relative;
|
|
display: inline-block;
|
|
border-radius:50%;
|
|
width:25px;
|
|
height:25px;
|
|
background: white;
|
|
cursor: pointer;
|
|
transition: all 0.4s ease-out;
|
|
|
|
}
|
|
.pagination ul li a{
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
#firstpage{
|
|
background: #00CD66;
|
|
}
|
|
#a{
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
<div class="pagination">
|
|
|
|
<%! int dd[]={1,2,3,4,5,6,7,8,9,10};
|
|
%>
|
|
<%
|
|
request.setAttribute("dd", dd);
|
|
%>
|
|
|
|
<ul class="on">
|
|
<li class="prev"><a><</a></li>
|
|
<c:forEach items="${name}" var="val" varStatus="index">
|
|
<c:if test="${index.index<4}">
|
|
|
|
<li class="li li${index.index} lii"><a>${val}</a></li>
|
|
</c:if>
|
|
|
|
</c:forEach>
|
|
|
|
|
|
<!--
|
|
<li class="li" id="firstpage"><a id="a">1</a></li>
|
|
<li class="li"><a>2</a></li>
|
|
<li class="li"><a>3</a></li>
|
|
<li class="li"><a>4</a></li>
|
|
-->
|
|
<li class="next" ><a> > </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(".li0").attr('id','firstpage');
|
|
$("#firstpage a").attr('id','a');
|
|
$(".pagination .li").click(function(){
|
|
var a = $(this).html();
|
|
console.log(a);
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
$(this).attr('id','firstpage');
|
|
$("#firstpage a").attr('id','a');
|
|
|
|
})
|
|
|
|
|
|
$(".pagination .prev").click(function(){
|
|
|
|
if(($("#firstpage").children().text()!='1')&&($("#firstpage").prev().attr("class")=="prev"))
|
|
|
|
{
|
|
$(".lii a").each(function () {
|
|
var a=parseInt($(this).text());
|
|
a=a-1;
|
|
$(this).text(a);
|
|
})
|
|
var page = parseInt($("#firstpage").children().text());
|
|
page=page+1;
|
|
//发送page页号
|
|
}
|
|
|
|
else if($("#firstpage").children().html()!='1')
|
|
{
|
|
var pre = $("#firstpage").prev();
|
|
var prea = $("#firstpage").prev().children();
|
|
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
pre.attr('id','firstpage');
|
|
prea.attr('id','a');
|
|
}
|
|
})
|
|
|
|
$(".pagination .next").click(function(){
|
|
if($("#firstpage").children().html()!='${fn:length(name)}')
|
|
console.log("y");
|
|
if("qq"=="qq")
|
|
console.log("yy");
|
|
|
|
|
|
if(($("#firstpage").children().text()!='${fn:length(name)}')&&($("#firstpage").next().attr("class")=="next"))
|
|
{
|
|
|
|
console.log('大于4');
|
|
var te = $(".lii a").text();
|
|
console.log(te);
|
|
|
|
$(".lii a").each(function () {
|
|
var a=parseInt($(this).text());
|
|
a=a+1;
|
|
$(this).text(a);
|
|
})
|
|
var page = parseInt($("#firstpage").children().text());
|
|
page=page+1;
|
|
//发送page页号
|
|
}
|
|
|
|
|
|
else if($("#firstpage").children().html()!='${fn:length(name)}')
|
|
{
|
|
var pre = $("#firstpage").next();
|
|
var prea = $("#firstpage").next().children();
|
|
|
|
$("#firstpage").removeAttr("id");
|
|
$("#a").removeAttr("id");
|
|
|
|
pre.attr('id','firstpage');
|
|
prea.attr('id','a');
|
|
|
|
var page = parseInt($("#firstpage").children().text());
|
|
//发送page页号
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|