效果图
页面布局与样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同步课程</title>
<!-- 字体图标 -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
">
<!-- 引入同步课程样式 -->
<link rel="stylesheet" type="text/css" href="../css/online.css"/>
</head>
<body>
<!-- 导航菜单 -->
<nav>
<div class="main">
<img src="../img/public/logo.png" alt="" class="logo">
<ul>
<li><a href="../index.html">首页</a></li>
<!-- javascript:; 阻止默认行为 -->
<li class="check"><a href="javascript:;">同步课程</a></li>
<li><a href="javascript:;">在线练习</a></li>
<li><a href="javascript:;">精品课程</a></li>
</ul>
<div class="search">
<div class="left">课程<i class="iconfont icon-down"></i>
</div>
<input type="text" placeholder="搜索感兴趣的内容">
<img src="../img/public/search.png" alt="">
</div>
<div class="login">
<a href="javascript:;">登陆</a>
/
<a href="javascript:;">注册</a>
</div>
<div class="user">
<img src="../img/login/user.png" alt="">
<div class="userlist">
<ul>
<li>我是用户名</li>
<li>课程中心</li>
<li>订单中心</li>
<li>资金管理</li>
<li>个人中心</li>
<li class="out">退出登陆</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- 主体内容 -->
<main>
<div class="row">
<div class="left">按省份选择</div>
<div class="right">
<span>省份<i class="iconfont icon-down"></i></span>
<span>城市<i class="iconfont icon-down"></i></span>
</div>
</div>
<div class="row">
<div class="left">热门城市</div>
<div class="right">
<ul>
<li><a>北京</a></li>
<li><a>上海</a></li>
<li><a>江苏</a></li>
<li><a>济南</a></li>
<li><a>河南</a></li>
<li><a>天津</a></li>
<li><a>沈阳</a></li>
<li><a>石家庄</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按年级选择</div>
<div class="right">
<ul>
<li><a>大班</a></li>
<li><a>中班</a></li>
<li><a>一年级</a></li>
<li><a>二年级</a></li>
<li><a>三年级</a></li>
<li><a>四年级</a></li>
<li><a>五年级</a></li>
<li><a>六年级</a></li>
<li><a>初一</a></li>
<li><a>初二</a></li>
<li><a>初三</a></li>
<li><a>高一</a></li>
<li><a>高二</a></li>
<li><a>高三</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按学科选择</div>
<div class="right">
<ul class="fenlei">
<li obj="1"><a class="active">全部</a></li>
<li obj="yuwen"><a>语文</a></li>
<li obj="shuxue"><a>数学</a></li>
<li obj="english"><a>英语</a></li>
<li obj="shengwu"><a>生物</a></li>
<li obj="lishi"><a>历史</a></li>
<li obj="zhengzhi"><a>政治</a></li>
<li obj="wuli"><a>物理</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="left">按版本选择</div>
<div class="right">
<ul>
<li><a class="active">人教版</a></li>
<li><a>沪教版</a></li>
<li><a>苏教版</a></li>
<li><a>浙教版</a></li>
<li><a>外研版</a></li>
<li><a>人教版</a></li>
<li><a>人教版</a></li>
</ul>
</div>
</div>
<div class="lesson">
<ul>
<!-- <li>
<div class="top">
<img src="../img/online/banner1-1.png" alt="" class="m">
<p>1100人在学习</p>
</div>
<div class="bottom">
<div class="left">
<span>人教版语文第一节课程内容讲解</span>
<span class="time">23课时</span>
</div>
<div class="right">免费学习</div>
</div>
</li> -->
</ul>
</div>
<div class="pageNum">
<!-- <button class="active">上一页</button>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<button class="active">下一页</button> -->
</div>
</main>
<footer>
<div class="cont">
<div class="main">
<p>
首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
营业执照
| 教师资格证公示
</p>
<p>
京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 |
京公网安备
01010102002533号
</p>
<p>
京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
食品经营许可证：JY13101140088888
</p>
<p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
</div>
</div>
</footer>
<!-- 引入数据 -->
<script src="../data/onlinedata.js" type="text/javascript" charset="utf-8"></script>
<!-- 常用方法库 -->
<script src="../utils/utils.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入同步课程js -->
<script src="../js/online.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
外部css样式online.css：
@import 'public.css';
.clearfix {
display: block;
content: '';
clear: both;
}
nav {
width: 100%;
height: 80px;
background: #fff;
box-shadow: 0 2px 3px #dad6d6;
vertical-align: top;
}
nav .main {
width: 1180px;
margin: 0 auto;
}
nav .main ul li:hover {
background: #80C4AE;
color: #fff;
}
nav .main ul li:hover a {
color: #fff;
font-size: 16px;
}
nav .logo {
width: 179px;
height: 53px;
margin: 13px 0 14px 0;
}
nav ul {
display: inline-block;
margin-left: 120px;
border: none;
font-size: 0;
}
nav ul li {
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
margin-right: 17px;
text-align: center;
}
nav ul li a {
color: #333;
font-size: 16px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul .check {
background: #80C4AE;
color: #fff;
}
nav ul .check a {
color: #fff;
font-size: 16px;
}
nav div.search {
display: inline-block;
margin-left: 120px;
border: 1px solid #80C4AE;
border-radius: 3px;
width: 280px;
height: 36px;
text-align: center;
font-size: 0;
padding: 0;
overflow: hidden;
vertical-align: middle;
position: relative;
}
nav div.search .left {
width: 69px;
height: 36px;
border-right: 1px solid #80C4AE;
font-size: 14px;
text-align: center;
line-height: 36px;
float: left;
color: #80C4AE;
padding: 0;
}
nav div.search .left i {
margin-left: 6px;
font-size: 5px;
}
nav div.search input {
border: none;
outline: none;
display: inline-block;
height: 36px;
text-align: center;
font-weight: 400;
font-size: 14px;
}
nav div.search img {
width: 20px;
height: 20px;
position: absolute;
right: 7px;
top: 8px;
}
nav .login {
margin-left: 24px;
display: inline-block;
color: #80C4AE;
font-size: 14px;
}
nav .user {
display: inline-block;
margin-left: 24px;
display: none;
}
nav .user img {
width: 36px;
height: 36px;
border-radius: 50%;
}
nav .main .user {
position: relative;
}
nav .main .user .userlist {
width: 122px;
height: 269px;
background: url('../img/login/jx.png') no-repeat;
background-size: cover;
position: absolute;
top: 35px;
right: -15px;
display: none;
z-index: 99999;
}
nav .main .user .userlist ul {
width: 122px;
height: 100%;
padding-top: 30px;
margin-left: 0;
}
nav .main .user .userlist ul li {
font-size: 16px;
color: #333;
line-height: 30px;
height: 40px;
text-align: center;
width: 100%;
cursor: pointer;
}
nav .main .user .userlist ul li:hover {
background: none;
}
nav .main .user .userlist ul li:last-child {
color: #666;
}
nav .main .user:hover .userlist {
display: block;
}
footer {
width: 100%;
height: 264px;
background: #333;
margin-top: 36px;
padding-top: 87px;
}
footer .cont {
width: 1180px;
height: 100%;
margin: 0 auto;
}
footer .cont .main {
width: 1153px;
height: 90px;
color: #ccc;
font-size: 14px;
line-height: 18px;
text-align: center;
margin: 0 auto;
}
footer .cont .main p {
margin-top: 5px;
}
.pos {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
display: none;
z-index: 99999999;
}
.pos .login {
width: 520px;
height: 522px;
background: #FFFFFF;
border-radius: 4px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
padding-top: 30px;
}
.pos .login span.close {
position: absolute;
right: 25px;
top: 25px;
color: #999;
z-index: 9999;
font-size: 20px;
}
.pos .login img {
width: 136px;
height: 40px;
margin-bottom: 46px;
}
.pos .login ul {
padding-left: 20px;
}
.pos .login ul::after {
display: block;
content: '';
clear: both;
}
.pos .login ul li {
width: 134px;
height: 1px;
float: left;
border-top: 1px solid #ececec;
margin-top: 12px;
}
.pos .login ul li.phone {
float: left;
width: 162px;
height: 25px;
font-size: 18px;
font-weight: 400;
color: #333333;
line-height: 25px;
border: none;
margin: 0 18px;
margin-bottom: 21px;
}
.pos .login input {
display: block;
margin-left: 110px;
width: 300px;
height: 40px;
border-radius: 4px;
border: 1px solid #80C4AE;
padding-left: 24px;
margin-bottom: 20px;
}
.pos .login .loginbtn {
width: 300px;
height: 40px;
border-radius: 4px;
border: 1px solid #80C4AE;
background: #74C6B3;
color: #fff;
text-align: center;
font-size: 16px;
outline: none;
margin-bottom: 10px;
}
.pos .login p {
width: 300px;
margin: 0 auto;
margin-bottom: 36px;
}
.pos .login p::after {
display: block;
content: '';
clear: both;
}
.pos .login p span {
display: inline-block;
color: #333;
font-size: 12px;
}
.pos .login p span:first-child {
float: left;
}
.pos .login p span:last-child {
float: right;
}
.pos .login p span a {
font-size: 12px;
color: #74C6B3;
}
.pos .login p.getCenter {
display: block;
}
.pos .login p.getCenter img {
width: 36px;
height: 36px;
border-radius: 50%;
}
.pos .login p.getCenter img:nth-child(2) {
margin-left: 30px;
margin-right: 30px;
}
main {
width: 1180px;
margin: 0 auto;
margin-top: 22px;
}
main .row {
min-height: 60px;
line-height: 40px;
color: #333;
font-size: 16px;
vertical-align: middle;
width: 1180px;
height: auto;
}
main .row .left {
float: left;
font-weight: Semibold;
margin-right: 10px;
color: #222;
width: 80px;
}
main .row .right {
float: left;
width: 1090px;
}
main .row .right span {
width: 180px;
height: 40px;
border: 1px solid #80C4AE;
border-radius: 4px;
display: inline-block;
padding-left: 18px;
color: #666;
position: relative;
font-size: 14px;
margin-left: 22px;
cursor: pointer;
}
main .row .right span i {
color: #80C4AE;
position: absolute;
right: 13px;
}
main .row .right ul {
margin-left: 35px;
}
main .row .right ul li {
display: inline-block;
margin-right: 50px;
color: #666;
width: 52px;
text-align: center;
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
}
main .row .right ul li a.active {
background: #80C4AE;
color: #fff;
border-radius: 4px;
padding: 3px 5px;
}
main .row::after {
display: block;
content: '';
clear: both;
}
main .lesson {
width: 1180px;
margin: 20px auto 0;
}
main .lesson ul li {
width: 380px;
height: 256px;
box-shadow: 0 2px 5px #dad6d6;
background: #fff;
position: relative;
overflow: hidden;
margin: 0 20px 20px 0;
float: left;
cursor: pointer;
}
main .lesson ul li:nth-child(3n) {
margin-right: 0;
}
main .lesson ul li .top {
width: 380px;
height: 196px;
vertical-align: top;
overflow: hidden;
}
main .lesson ul li .top img.m {
width: 380px;
height: 196px;
}
main .lesson ul li .top > p {
position: absolute;
bottom: 60px;
left: 0;
width: 100%;
height: 33px;
line-height: 33px;
font-size: 14px;
background: #000000;
color: #fff;
padding-left: 10px;
opacity: 0.3;
}
main .lesson ul li .bottom {
width: 100%;
height: 62px;
overflow: hidden;
line-height: 20px;
font-size: 14px;
color: #333;
margin-top: 7px;
padding-left: 14px;
}
main .lesson ul li .bottom .left {
float: left;
}
main .lesson ul li .bottom .left span {
display: block;
}
main .lesson ul li .bottom .left span.time {
margin-top: 5px;
font-size: 14px;
line-height: 17px;
color: #7A7A7A;
}
main .lesson ul li .bottom .right {
float: right;
margin-top: 12px;
margin-right: 14px;
width: 86px;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #fff;
background: #74C6B3;
text-align: center;
border-radius: 4px;
}
main .lesson ul::after {
display: block;
content: '';
clear: both;
zoom: 1;
}
main .pageNum {
width: 1180px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
main .pageNum ul {
text-align: center;
line-height: 25px;
font-size: 18px;
display: inline-block;
}
main .pageNum ul li {
display: inline-block;
width: 37px;
height: 40px;
padding: 9px 14px 6px;
color: #333;
background: #ededed;
border-radius: 4px;
font-family: PingFangSC-Semibold, PingFang SC;
margin-right: 12px;
}
main .pageNum ul li.active {
background: #80C4AE;
color: #fff;
}
main .pageNum button {
width: 91px;
height: 40px;
outline: none;
border: none;
background: #ededed;
font-size: 18px;
color: #a4a4a4;
padding: 9px 19px 6px 18px;
border-radius: 4px;
margin: 0 28px;
font-family: PingFangSC-Semibold, PingFang SC;
}
main .pageNum button.active {
color: #333;
}
main .pageNum button:last-child {
margin-left: 8px;
}
公共样式public.css：
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
margin:0;
padding: 0;
}
body{
font:12px "微软雅黑","Arial Narrow",HELVETICA;
background-color: #f2f2f2;
}
* {
box-sizing: border-box;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#8b8d8c;
}
em,i{
font-style: normal;
}
b,strong{
font-weight: normal;
}
img{
border: none;
vertical-align: middle;
}
input{
outline: none;
}
textarea{
resize: none;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size:16px;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.fl{
float: left;
}
.fr{
float: right;
}后台数据用js模拟onlinedata.js：
var online = [
{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}, {
title: '人教版数学第一节课程内容讲解',
src: '../img/online/banner1-2.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shuxue'
}, {
title: '人教版英语第一节课程内容讲解',
src: '../img/online/banner1-3.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'english'
}, {
title: '人教版数学第一节课程内容讲解',
src: '../img/online/banner1-4.png',
cont: '人教版',
time: 22,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shuxue'
}, {
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-5.png',
cont: '人教版',
time: 33,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}, {
title: '人教版英语第一节课程内容讲解',
src: '../img/online/banner1-6.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'english'
}, {
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner2-1.png',
cont: '人教版',
time: 33,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-2.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-3.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: '化学'
}, {
title: '人教版生物第一节课程内容讲解',
src: '../img/online/banner2-4.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shengwu'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-5.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-6.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'huaxue'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-3.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: '化学'
}, {
title: '人教版生物第一节课程内容讲解',
src: '../img/online/banner2-4.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shengwu'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-3.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: '化学'
}, {
title: '人教版生物第一节课程内容讲解',
src: '../img/online/banner2-4.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shengwu'
}, {
title: '人教版英语第一节课程内容讲解',
src: '../img/online/banner1-6.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'english'
}, {
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner2-1.png',
cont: '人教版',
time: 33,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-2.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-3.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: '化学'
}, {
title: '人教版生物第一节课程内容讲解',
src: '../img/online/banner2-4.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shengwu'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-5.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
}, {
title: '人教版英语第一节课程内容讲解',
src: '../img/online/banner1-6.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'english'
}, {
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner2-1.png',
cont: '人教版',
time: 33,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-2.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
}, {
title: '人教版化学第一节课程内容讲解',
src: '../img/online/banner2-3.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: '化学'
}, {
title: '人教版生物第一节课程内容讲解',
src: '../img/online/banner2-4.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'shengwu'
}, {
title: '人教版物理第一节课程内容讲解',
src: '../img/online/banner2-5.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'wuli'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
},
{
title: '人教版语文第一节课程内容讲解',
src: '../img/online/banner1-1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100,
city: 'bj',
level: 1,
subject: 'yuwen'
}
];js代码online.js：
1.获取元素
var lessonUl = document.querySelector(".lesson ul");
var pageNum = document.querySelector(".pageNum");2.引入数据。online是onlinedata.js中数组的名字。
var datas = online;3.定义当前页、每页条数、总页数、当前页数据
总页数：数据的总条数除以每页条数，是总页数，因为数据不一定是刚好12的倍数，所以有可能出现小数，就要用Math.ceil向上取整，保证<12条数据也能独占一页。
当前页数据的公式： (当前页 - 1)*每页展示数据条数,当前页*每页展示数据条数。
datas.slice（startIndex，endIndex） 数组截取：从当前索引开始截取到结 束索引（不包含结束索引）。
datas.slice(0,12); 第1页12条
datas.slice(12,24); 第2页12条
datas.slice(24,36); 第3页12条
datas.slice(36,48); 第4页12条 (有多少条数据符合就返回多少条，没有符合的返回空数组)
//固定当前页为1
var curPage:1
//每页条数
var curPageNum = 12;
//总页数
var pageTotal = Math.ceil(datas.length / curPageNum);
//当前页数据
var arrDatas = datas.slice((curPage - 1) * curPageNum, curPage * curPageNum);4.课程数据绑定
字符串拼接不支持换行，所以使用了模板字符串，数字1在英文状态下输入``，其间支持变量或表达式，${变量或表达式}。
//lessonUl是数据绑定区域，arrDatas表示当页的12条数据
lessonBindData(lessonUl, arrDatas);
function lessonBindData(ele, data) {
//定义空字符串
var str = "";
//迭代当前数组
data.forEach(function (val) {
//字符串拼接
str += `<li>
<div class="top">
<img src="${val.src}" alt="" class="m">
<p>${val.num}人在学习</p>
</div>
<div class="bottom">
<div class="left">
<span>${val.title}</span>
<span class="time">${val.time}课时</span>
</div>
<div class="right">免费学习</div>
</div>
</li>`
})
//将字符串str赋值给页面中的数据绑定区域
ele.innerHTML = str;
};5.页码数据绑定
//页码数据绑定 页码区域 当前页 总页数
pageBindData(pageNum, curPage, pageTotal);
function pageBindData(ele, cur, len) {
//定义空数组
var str = "";
//拼接上一页
str += '<button class="active">上一页</button><ul>';
//拼接li
for (var i = 1; i <= len; i++) {
//如果当前页为第一页，给其class类名为active的激活样式，其它类名为空。使用了三目运算符
str += i == cur ? '<li class="active">' + i + '</li>' : ' <li>' + i + '</li>';
}
//拼接下一页
str += '</ul><button class="active">下一页</button>';
//将字符串str赋值给页面中的页码绑定区域
ele.innerHTML = str;
}6.当前页curPage不能是固定的，所以以上代码需要封装，定义形参，将页码以实参传入。
function init(curPage) {
//每页条数
var curPageNum = 12;
//总页数
var pageTotal = Math.ceil(datas.length / curPageNum);
//当前页数据
var arrDatas = datas.slice((curPage - 1) * curPageNum, curPage * curPageNum);
//课程数据绑定 ul区域 当页的12条数据
lessonBindData(lessonUl, arrDatas);
// console.log(lessonUl,arrDatas)
function lessonBindData(ele, data) {
//定义空字符串
var str = "";
//迭代当前数组
data.forEach(function (val) {
str += `<li>
<div class="top">
<img src="${val.src}" alt="" class="m">
<p>${val.num}人在学习</p>
</div>
<div class="bottom">
<div class="left">
<span>${val.title}</span>
<span class="time">${val.time}课时</span>
</div>
<div class="right">免费学习</div>
</div>
</li>`
})
ele.innerHTML = str;
}
//页码数据绑定 页码区域 当前页 总页数
pageBindData(pageNum, curPage, pageTotal);
function pageBindData(ele, cur, len) {
//定义空数组
var str = "";
//拼接上一页
str += '<button class="active">上一页</button><ul>';
//拼接li
for (var i = 1; i <= len; i++) {
str += i == cur ? '<li class="active">' + i + '</li>' : ' <li>' + i + '</li>';
}
//拼接下一页
str += '</ul><button class="active">下一页</button>';
ele.innerHTML = str;
}7.页面初始化，先将第一页作为展示界面。将数字1作为实参，传给init的形参。
init(1);8.实现点击页码换页、上一页、下一页的功能。
获取button及li：
var btns = ele.querySelectorAll("button");
var oLis = ele.querySelectorAll("li");（1）页码切换 绑定事件
this.innerHTML：点击相应li的内容，也就是数字，做取整操作后， 用init()函数重新调用，就可实现换页功能。
for(var i = 0;i < oLis.length;i++){
oLis[i].onclick = function(){
init(parseInt(this.innerHTML))
}
}（2）上一页
btns[0].onclick = function(){
cur--;
init(cur);
};
//如果当前页为第一页
if(cur <= 1){
//清空激活样式 清除点击事件
btns[0].className = "";
btns[0].onclick = null;
};（3）下一页
btns[1].onclick = function(){
cur++;
init(cur);
};
if(cur >= len){
btns[1].className = "";
btns[1].onclick = null;
}最后完整的js代码：
//获取元素
var lessonUl = document.querySelector(".lesson ul");
var pageNum = document.querySelector(".pageNum");
//获取数据
var datas = online;
//页面初始化
init(1);
// curPage:当前页
function init(curPage) {
//每页条数
var curPageNum = 12;
//总页数
var pageTotal = Math.ceil(datas.length / curPageNum);
//当前页数据
var arrDatas = datas.slice((curPage - 1) * curPageNum, curPage * curPageNum);
//课程数据绑定 ul区域 当页的12条数据
lessonBindData(lessonUl, arrDatas);
// console.log(lessonUl,arrDatas)
function lessonBindData(ele, data) {
//定义空字符串
var str = "";
//迭代当前数组
data.forEach(function (val) {
str += `<li>
<div class="top">
<img src="${val.src}" alt="" class="m">
<p>${val.num}人在学习</p>
</div>
<div class="bottom">
<div class="left">
<span>${val.title}</span>
<span class="time">${val.time}课时</span>
</div>
<div class="right">免费学习</div>
</div>
</li>`
})
ele.innerHTML = str;
}
//页码数据绑定 页码区域 当前页 总页数
pageBindData(pageNum, curPage, pageTotal);
function pageBindData(ele, cur, len) {
//定义空数组
var str = "";
//拼接上一页
str += '<button class="active">上一页</button><ul>';
//拼接li
for (var i = 1; i <= len; i++) {
str += i == cur ? '<li class="active">' + i + '</li>' : ' <li>' + i + '</li>';
}
//拼接下一页
str += '</ul><button class="active">下一页</button>';
ele.innerHTML = str;
//获取button及li
var btns = ele.querySelectorAll("button");
var oLis = ele.querySelectorAll("li");
//页码切换 绑定事件
for(var i = 0;i < oLis.length;i++){
oLis[i].onclick = function(){
init(parseInt(this.innerHTML))
// console.log(this.innerHTML) //点击的li的数字，做取整操作后， 用init()函数重新调用
}
}
//上一页
btns[0].onclick = function(){
cur--;
init(cur);
}
if(cur <= 1){
//清空激活样式 清除点击事件
btns[0].className = "";
btns[0].onclick = null;
}
//下一页
btns[1].onclick = function(){
cur++;
init(cur);
}
if(cur >= len){
btns[1].className = "";
btns[1].onclick = null;
}
}
};
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
