老师我问一个课外练习题，帮帮我，谢谢老师
来源：8-1 对象冒充
慕妹8524794
2020-02-07 03:26:02
分页功能：当我选择跳转到第二页的时候或者第三页的时候，点击确认按钮，如果跳转到对应的页数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>分页</title>
<link rel="stylesheet" href="style8.css" />
</head>
<body>
<div class="goods-list-v2 g1-type-1 J-goods-list">
<ul class="gl-warp clearfix" id="gl-warp"></ul>
</div>
<div class="page clearfix">
<div class="p-wrap">
<span class="p-num">
<a href="#" class="pn-prev disabled" onclick="prevPage()">
<i> <</i> <em>上一页</em>
</a>
<a href="#" onclick="loadData(1)" class="curr">1</a>
<a href="#" onclick="loadData(2)">2</a>
<a href="#" onclick="loadData(3)">3</a>
<a
onclick="nextPage()"
href="#"
class="pn-next"
title="使用方向键右键也可翻到下一页哦！"
>
<em>下一页</em>
<i>></i>
</a>
</span>
<span class="p-skip">
<em>
共
<b>3</b>
页 到第
</em>
<input class="input-txt" type="text" value="1" />
<em>页</em>
<a href="#" class="btn btn-default">确定</a>
</span>
</div>
</div>
<script src="script8.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
.goods-list-v2{
margin-bottom: 20px;
height: auto;
position: relative;
z-index: 1;
}
.gl-warp{
width: 1200px;
height: auto;
margin-right: -40px;
}
.goods-list-v2 .gl-item{
width: 240px;
height: 474px;
float: left;
position: relative;
z-index: 1;
margin-top: 10px;
}
ul {
list-style: none;
}
.haier-sea{
width:220px;
position: absolute;
z-index: 1;
left: 0;
top: 0;
background: #fff;
border: 1px solid #fff;
padding: 38px 9px 10px;
transition: border-color .1s ease;
}
.goods-list-v2 .gl-item .p-tag {
float: left;
height: 16px;
padding: 0 3px;
margin-top: 2px;
margin-right: 3px;
overflow: hidden;
color: #fff;
font: 12px/16px "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
background: #838dc7;
border-radius: 2px;
}
.goods-list-v2 .gl-item:hover .haier-sea{
z-index: 1;
border-color: #e9e9e9;
box-shadow: 0 0 2px 2px #f8f8f8;
}
.h-img{
margin-bottom: 15px;
}
.h-money{
line-height: 22px;
height: 22px;
width: 100%;
margin: 0 0 8px;
}
.h-money strong{
color: #e1251b;
font-size: 20px;
font-weight: 400;
font-family: Verdana;
}
.jiage em{
font-size: 16px;
}
em,i{
font-style: normal;
}
.jiage-a{
margin-left: -7px;
}
.h-commit{
margin-bottom: 9px;
}
.pingjia-a{
margin-left: -4px;
}
.h-commit a{
color: #646fb0;
font-family: Verdana;
font-weight: 700;
}
.pingjia-a{
color: #a7a7a7;
font-weight: 400;
}
a{
color: #666;
text-decoration: none;
}
.Hai{
color: #e1251b;
}
.air{
color: #e1251b;
}
.goods-list-v2 .gl-item .p-name-type-1 a em{
display: inline;
}
.h-name em{
height: 20px;
line-height: 20px;
overflow: hidden;
transition: height .08s ease;
}
.h-name{
margin-bottom: 8px;
}
.h-shop span a{
color: #999;
}
.h-shop{
line-height: 18px;
height: 18px;
margin-top: -3px;
margin-bottom: 9px;
}
.h-shop span{
display: inline-block;
position: relative;
height: 18px;
}
.im-02{
width: 16px;
height: 16px;
}
.h-shop span .im-02{
cursor: pointer;
position: absolute;
right: -21px;
top: 1px;
display: block;
}
.h-icons{
height: 16px;
margin-bottom: 12px;
}
.self-support,
.buy-at-ease {
position: relative;
}
.self-support:hover .tooltip1 {
display: block;
}
.buy-at-ease:hover .tooltip2 {
display: block;
}
.tooltip1{
display: none;
position: absolute;
z-index: 1;
top: 25px;
width: 237px;
margin-left: -11px;
height: 35px;
line-height: 35px;
background-color: white;
border: 1px solid grey;
color:#666;
}
.tooltip2{
display: none;
position: absolute;
z-index: 1;
top: 25px;
left: -31px;
width: 237px;
margin-left: -11px;
height: 35px;
line-height: 35px;
background-color: white;
border: 1px solid grey;
color:#666;
}
.tooltip1::before {
content: "";
position: absolute;
top: -5px;
left: 10px;
padding: 3px;
background-color: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
.tooltip2::before {
content: "";
position: absolute;
top: -5px;
left: 43px;
padding: 3px;
background-color: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
.ziti1{
margin-left: 6px;
}
.ziti2{
margin-left: 8px;
}
.skcolor_ljg:hover{
color: #e23a3a;
}
.h-operate .h-o-btn:hover{
color: #e4393c;
z-index: 1;
border-color:#e4393c;
}
.h-operate .contrast:hover i{
border-color: #e4393c;
}
.self-support{
float: left;
height: 16px;
line-height: 16px;
font-size: 12px;
padding: 0 3px;
margin-right: 3px;
background: #e23a3a;
color: #FFF;
font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
border-radius: 2px;
}
.buy-at-ease{
float: left;
font-family: "Helvetica Neue","Hiragino Sans GB",SimSun,serif;
height: 14px;
line-height: 14px;
padding: 0 3px;
border: 1px solid #e23a3a;
border-radius: 2px;
}
.h-operate .contrast{
width: 28px;
}
.h-operate .follow{
width: 28px;
}
.h-operate{
position: relative;
width: 220px;
height: 27px;
}
.h-operate .h-o-btn{
float: left;
height: 25px;
line-height: 25px;
border: 1px solid #DDD;
padding: 0px 5px 0px 24px;
position: relative;
background: #fff;
color: #999;
}
.h-operate .contrast i{
position: absolute;
left: 5px;
top: 5px;
display: inline-block;
height: 12px;
width: 12px;
border:1px solid #ccc;
font-size: 0px;
}
.kongxin{
position: absolute;
display: block;
font-style: normal;
left: 4px;
top: 3px;
width: 18px;
height: 18px;
background: url(img/search.ele.png);
background-position: 0 -413px;
}
.h-operate .follow:hover .kongxin {
background: url(img/search.ele.png);
background-position: 0 -436px;
transition: background-position 0.3s ease-in-out;
}
.h-operate .follow, .shopping-cart{
margin-left: -1px;
}
.h-operate .shopping-cart{
width: 67px;
text-align: center;
color: #e4393c;
}
.h-operate .shopping-cart i{
position: absolute;
display: block;
font-style: normal;
left: 4px;
top: 3px;
width: 18px;
height: 18px;
background: url(img/search.ele.png)0 -272px;
}
.clearfix{
width: 1200px;
height: 38px;
}
.page .p-wrap{
float: right;
}
.pege .p-num{
float: left;
}
.page .disabled{
background:0 0;
background: #fff;
cursor: default;
}
.page .p-num a{
color: #333;
border: 1px solid #ddd;
}
.page .p-num a{
float: left;
height: 36px;
line-height: 36px;
padding: 0 14px;
margin-right: 5px;
font-size: 14px;
}
.page .p-num .disabled{
color: #ccc;
}
.page .p-num .pn-prev i{
padding-left: 0;
}
.page .p-num .pn-prev i {
vertical-align: middle;
font-style: normal;
font-size: 16px;
font-family: "\5b8b\4f53";
padding: 0 5px;
color: #aaa;
}
.page .p-num .disabled em{
color: #ccc;
}
.page .p-num .pn-next em, .page .p-num .pn-prev em {
vertical-align: middle;
}
.page .p-skip {
float: left;
margin-left: 20px;
}
.page .p-skip em {
float: left;
line-height: 38px;
font-size: 14px;
}
.page .p-skip .input-txt {
float: left;
width: 30px;
height: 30px;
margin: 0 3px;
line-height: 30px;
font-size: 14px;
text-align: center;
}
.input-txt{
border: 1px solid #CCC;
padding: 3px;
}
.page .p-skip em {
float: left;
line-height: 38px;
font-size: 14px;
}
.page .p-skip .btn {
float: left;
height: 27px;
margin-left: 10px;
font-size: 14px;
line-height: 27px;
}
.btn-default {
border: 1px solid #DDD;
padding: 4px 13px 5px;
color: #666;
background-color: #f7f7f7;
background-repeat: repeat-x;
}
.btn {
display: inline-block;
line-height: 14px;
height: 14px;
border-radius: 2px;
background: #F7F7F7;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.page .p-num a.curr {
border: 0 none;
padding: 1px 15px;
background: 0 0;
-webkit-filter: none;
filter: none;
color: #e4393c;
cursor: default;
}
function getItem(itemData) {
return `<li class="gl-item">
<div class="haier-sea">
<div class="h-img">
<a href="#" title="${itemData.title}">
<img src="${itemData.imgUrl}">
</a>
</div>
<div class="h-money">
<strong class="jiage">
<em>¥</em>
<i class="jiage-a">${itemData.price}</i>
</strong>
</div>
<div class="h-name p-name-type-1">
<a href="#" title="${itemData.title}">
<em>
<span class="skcolor_ljg">
TP-LINK双千兆
<span class="Hai">路由器</span>
1900M无线家用 5G双频
WDR7661千兆版 千兆端口 高速</span>
</em>
<i></i>
</a>
</div>
<div class="h-commit">
<strong>
<a href="#">${itemData.commentCount}</a>
<i class="pingjia-a">条评价</i>
</strong>
</div>
<div class="h-shop">
<span class="qjd">
<a href="#" title="TP-LINK京东自营旗舰店">TP-LINK京东自营旗舰店</a>
<b class="im-02" style="background: url(img/5bc4255bN0776eea6.png)no-repeat;"
title="联系客服"></b>
</span>
</div>
<div class="h-icons">
<i class="self-support">自营
<div class="tooltip1"><span class="ziti1">京东自营，品质保障</span></div>
</i>
<i class="buy-at-ease" style="border-color:#4d88ff;color: #4d88ff;">放心购
<div class="tooltip2"><span class="ziti2">品质服务，放心购物</span></div>
</i>
</div>
<div class="h-operate">
<a href="#" class="h-o-btn contrast">
<i></i>
对比
</a>
<a href="#" class="h-o-btn follow">
<i class="kongxin"></i>
关注
</a>
<a href="#" class="h-o-btn shopping-cart">
<i></i>
加入购物车
</a>
</div>
</div>
</li>`;
}
var globalPageIndex = 1;
var pageSize = 5;
function loadData(pageIndex) {
// 当点击1，2，3分页时，需要更新globalPageIndex
globalPageIndex = pageIndex;
var array = [
{
title:
"LINK年货节，换个好路由，过年不断网！1900M易展mesh分布路由，新品上市！点此查看更多",
imgUrl: "img/bfcd6ba86e8544ac.jpg",
price: "199.00",
commentCount: "185万+"
},
{
title:
"LINK年货节，换个好路由，过年不断网！1900M易展mesh分布路由，新品上市！点此查看更多",
imgUrl: "img/d59bd88f0d960c5d.jpg",
price: "199.00",
commentCount: "186万+"
},
{
title:
"LINK年货节，换个好路由，过年不断网！1900M易展mesh分布路由，新品上市！点此查看更多",
imgUrl: "img/d0282c9e9b231c14.jpg",
price: "199.00",
commentCount: "187万+"
},
{
title:
"LINK年货节，换个好路由，过年不断网！1900M易展mesh分布路由，新品上市！点此查看更多",
imgUrl: "img/4db2e687370002ce.jpg",
price: "199.00",
commentCount: "187万+"
},
{
title:
"LINK年货节，换个好路由，过年不断网！1900M易展mesh分布路由，新品上市！点此查看更多",
imgUrl: "img/6c755dd01ebf8713.jpg",
price: "199.00",
commentCount: "187万+"
},
{
title:
"小米路由器4A千兆版 双核CPU 双千兆 1200M双频无线速率 5G 家用智能路由器 四天线穿墙 双频合一 光纤适用",
imgUrl: "img/2cb8409991b38af5.jpg",
price: "129.00",
commentCount: "185万+"
},
{
title:
"小米路由器AC2100 双频路由器 2100M无线家用 5G双频 电竞路由 双千兆 光纤宽带WIFI穿墙 内配千兆网线",
imgUrl: "img/0e741b5c4358dbea.jpg",
price: "229.00",
commentCount: "185万+"
},
{
title:
"【小米开工大吉！采购有礼（限产品）！】【京仓速发，自营同款放心选购】【小米品牌授权，品质保证】欢迎咨询客服哦！",
imgUrl: "img/1a4383145b2e96fe.jpg",
price: "169.00",
commentCount: "100+"
},
{
title:
"小米路由器4A 无线双频 四天线稳定穿墙 防蹭网 5G 双频合一 稳定高速 家用路由器 智能APP远程控制",
imgUrl: "img/f478a156e8301a9a.jpg",
price: "95.00",
commentCount: "185万+"
},
{
title:
"小米路由器4C(白色) 300M无线速率 智能家用路由器 四天线 安全稳定 WiFi无线穿墙",
imgUrl: "img/26e87c16af99b884.jpg",
price: "57.00",
commentCount: "185万+"
},
{
title:
"【支持IPv6、爆款双核双千兆】】\n" +
"华为爆款四核路由，点击抢购",
imgUrl: "img/ab7aa65938523ca3.jpg",
price: "229.00",
commentCount: "117万+"
},
{
title:
"支持IPv6、爆款双核双千兆】】\n" +
"华为爆款四核路由，点击抢购",
imgUrl: "img/8a575f6e9c08eeed.jpg",
price: "159.00",
commentCount: "117万+"
},
{
title:
"【华为新品百元路由，真双频，加宽四天线】更多华为爆款路由，点击抢购",
imgUrl: "img/d25d36fdb5487242.jpg",
price: "109.00",
commentCount: "117万+"
},
{
title:
"华为新品路由，凌霄四核三频，一碰连网】】\n" +
"更多华为爆款路由，点击抢购",
imgUrl: "img/6d2fd80312c4b2c0.jpg",
price: "379.00",
commentCount: "117万+"
},
{
title:
"【支持IPv6、无处不快，覆盖无忧，哪里信号不好插哪里】】\n" +
"华为爆款四核路由，点击抢购",
imgUrl: "img/f4551dc6b3950154.jpg",
price: "929.00",
commentCount: "117万+"
}
];
// 页码开始的索引
var startIndex = (pageIndex - 1) * pageSize;
// 页码结束的索引
var endIndex = pageIndex * pageSize;
var newItems = [];
for (var i = 0; i < array.length; i++) {
// 把数组中要显示的范围取出来
if (i >= startIndex && i < endIndex) {
var itemWithHtml = getItem(array[i]);
newItems.push(itemWithHtml);
}
}
document.getElementById("gl-warp").innerHTML = newItems.join("");
}
// 上一页
function prevPage() {
debugger;
if (globalPageIndex > 1) {
globalPageIndex = globalPageIndex - 1;
loadData(globalPageIndex);
}
}
// 下一页
function nextPage() {
if (globalPageIndex < 3) {
globalPageIndex = globalPageIndex + 1;
loadData(globalPageIndex);
}
}
loadData(globalPageIndex);
1回答
-
好帮手慕星星
2020-02-07
同学你好，本站的教学服务只包含站内视频内容问题解答、站内习题问题解答、站内作业问题解答、站内测试题问题解答以及站内产品使用问题解答。同学的问题内容与本站视频、习题以及作业等内容无关联，故不包含在本站的教学服务内，并且本站禁止粘贴外网图片或者链接。
另外，同学现在还刚入门，掌握的技术还不够全面，基础相对比较薄弱，不适合做复杂的课外练习。建议同学自行完成与自身能力相匹配的拓展练习。并且合理安排时间，把学习的重点放在课程内容本身。打好基础，再去做这个练习，就能轻松独立完成了。
祝学习愉快！0
相似问题