描述: 实现多页面渲染课程、分页和筛选效果
代码实现
1.HTML
布局部分:
<!-- course list -->
<ul class = "courselist clearfix" id = "courselist">
<!-- <li>
<a class="img">
<img src="../img/list-1.jpg" alt="course">
</a>
<h3>计算机基础及编程入门优选课</h3>
<p>
共有<b id = "num">2990</b>人在学</span>
<em> | </em>
<span>￥<b id = "price">2.80</b></span>
</p>
</li> -->
</ul>
<div class="pagenav fr" id = "pagenav">
<span id = "first">首页</span>
<span id = "pre">上一页</span>
<strong class="pagesequence">
<!-- <span class="active">1</span>
<span>2</span>
<span>3</span>-->
</strong>
<span id = "next">下一页</span>
<span id = "last">尾页</span>
</div>
<div style="clear: both;"></div>
登录部分：
<li id = "notlogin">
<!-- <a href="#" class="font">登录</a>
<a href="#" class="font">注册</a> -->
</li>
<!-- link function -->
<script src = "../js/function.js"></script>
<!-- link template -->
<script src = "../js/template-web.js"></script>
<script type="text/html" id="login">
{{if loginState == 'false'}}
<a href="./login.html" class="font">登录</a>
<a href="./register.html" class="font">注册</a>
{{/if}}
{{if loginState == 'true'}}
<a href="javascript:;" class="font">个人中心</a>
<a href="javascript:;" class="font" id = "logout">退出</a>
{{/if}}
</script>
2.CSS
main .container .courselist{
width: 1200px;
margin-top: 20px;
}
main .container .courselist li{
width: 300px;
height: 255px;
/* border: 1px solid #333; */
float: left;
overflow: hidden;
}
main .container .courselist li .img{
display: block;
width: 285px;
height: 161px;
margin: 10px 7.5px 15px 7.5px;
overflow: hidden;
}
main .container .courselist li .img img{
width: 285px;
height: 161px;
transition: .3s linear;
}
main .container .courselist li:hover{
box-shadow: 0px 0px 10px #9377A9;
}
main .container .courselist li:hover .img img{
transform: scale(1.2);
}
main .container .courselist li h3{
width: 280px;
height: 35px;
padding-left: 7.5px;
font-size: 16px;
cursor: pointer;
/* 溢出显示省略号
1.盒子溢出隐藏*/
overflow: hidden;
/* 2.强制不换行 */
white-space: nowrap;
/* 3.文字溢出显示省略号 */
text-overflow: ellipsis;
}
main .container .courselist li h3:hover{
text-decoration: underline;
}
main .container .courselist li p{
padding-left: 8px;
color: #999999;
font-size: 14px;
}
main .container .courselist li p em{
color: #F0F3F8;
}
main .container .courselist li p span{
color: #FF6600;
}
main .container .pagenav{
margin-top: 40px;
}
main .container .pagenav span,
main .container .pagenav .pagesequence span{
padding: 12px 15px;
color: #9999B3;
font-size: 14px;
cursor: pointer;
border: 1px solid #DDDDDD;
border-radius: 4px;
margin: 0 5px;
}
main .container .pagenav .pagesequence span.active{
color: #ffffff;
background-color: #188EEE;
box-sizing: border-box;
}
main .container .pagenav span:hover,
main .container .pagenav .pagesequence span:hover{
color: #ffffff;
background-color: #188EEE;
box-sizing: border-box;
}
3.Javascript
登录部分：
// Get local storage
//console.log(localStorage);
if (!localStorage.username && !localStorage.password) {
console.log('未登录');
localStorage.loginState = false;
} else {
console.log('已登录');
localStorage.loginState = true;
}
// generate template
var html = template('login', localStorage);
// append father element
var notLogin = document.getElementById('notlogin');
notLogin.innerHTML = html;
// click exit button
if (localStorage.loginState == 'true') {
// click exit button, log out
var logout = document.getElementById('logout');
// console.log(logout);
// add click event
logout.onclick = function () {
// logout
localStorage.username = '';
localStorage.password = '';
localStorage.loginState = false;
// refresh
location.reload();
}
}
课程渲染部分与分页
// Get data from play.json
ajax('get', '../data/play.json', '', function (res) {
// console.log(res)
// Transform to js data
var courseUrl = JSON.parse(res);
// console.log(courseUrl);
// get element courselist
var courseList = document.getElementById('courselist');
// calculate number of course
var total = courseUrl.length;
// console.log(total);
// Rendering default page
// One page shows 16 courses
var pageNum = 0;
var lenPerPage = 16;
// Get maximum page
var maxPage = Math.ceil(total / lenPerPage);
// console.log(maxPage);
// Rendering page nav
// Geting element pagenav, span page
var pageNav = document.getElementById('pagenav');
var pageSeq = pageNav.getElementsByClassName('pagesequence')[0];
// console.log(pageNav, pageSeq);
var pageSpan;
// get firstPage and last page
var firstBtn = pageNav.querySelector('#first');
var lastBtn = pageNav.querySelector('#last');
// console.log(firstBtn, lastBtn);
createPageSeq();
// Rendering course to the page
getCourse();
/*
Next Page funtion, when click next page button
the page turns to the next page
Previous page funciton, when click previous button,
the page turns to the previous page
*/
var previous = pageNav.querySelector('#pre');
var next = pageNav.querySelector('#next');
// console.log(previous, next);
next.onclick = function () {
pageNum++;
shiftPage();
}
previous.onclick = function () {
pageNum--;
shiftPage();
}
/*
Click firstBtn and lastBtn, the page jumps to first page and last page
*/
firstBtn.onclick = function () {
pageNum = 0;
shiftPage();
}
lastBtn.onclick = function () {
pageNum = maxPage - 1;
shiftPage();
}
/*
Click page number, jump to corresponding page
*/
for (var i = 0; i < pageSpan.length; i++) {
// save index
pageSpan[i].index = i;
pageSpan[i].onclick = function () {
pageNum = this.index;
shiftPage();
}
}
function createPageSeq() {
var sequence = '';
for (var i = 0; i < maxPage; i++) {
sequence += '<span>' + (i + 1) + '</span>';
}
// give content to the pageSeq
pageSeq.innerHTML = sequence;
// The default page is one
pageSpan = pageSeq.getElementsByTagName('span');
// console.log(pageSpan);
// give current page active class
var currentPage = pageSpan[pageNum];
currentPage.className = 'active';
}
function getCourse() {
// Rendering data to course list
// show data we want to
// slice(startIndex, lastIndex)
// 0 - 15 16- 31 32 - 48
// startIndex: pageNum * lenPerPage
// lastIndex: (pageNum+1) * lenPerPage
var showCourse = courseUrl.slice(pageNum * lenPerPage, (pageNum + 1) * lenPerPage);
// console.log(showCourse);
var html = '';
for (var i = 0; i < showCourse.length; i++) {
html += `<li>
<a class="img">
<img src="${showCourse[i].img}" alt="course">
</a>
<h3>${showCourse[i].title}</h3>
<p>
共有<b id = "num">${showCourse[i].num}</b>人在学</span>
<em> | </em>
<span>￥<b id = "price">${showCourse[i].price}</b></span>
</p>
</li>`
}
// append html to courselist
courseList.innerHTML = html;
}
function shiftPage() {
// if page arrives at max page, stay in the max page
if (pageNum >= maxPage) {
alert('已经到达最后一页');
// stay in the last page
pageNum = maxPage - 1;
}
// if page arrives at the first page. stay in the first page
if (pageNum < 0) {
alert('已经是第一页!');
pageNum = 0;
}
getCourse();
for (var k = 0; k < pageSpan.length; k++) {
pageSpan[k].className = '';
}
currentPage = pageSpan[pageNum];
currentPage.className = 'active';
}
});
筛选功能:
1.筛选免费课程
2.筛选课程价格在100-499之间
// Get data from play.json
ajax('get', '../data/play.json', '', function (res) {
// console.log(res)
// Transform to js data
var courseUrl = JSON.parse(res);
// save filter data
var newCourseUrl = courseUrl;
// console.log(courseUrl);
// get element courselist
var courseList = document.getElementById('courselist');
// Click free or charge, filter corresponding
// courses
// get label, freeCheck and chargeCheck
var label = document.getElementsByTagName('label');
// console.log(label);
var freeCheck = document.getElementById('free');
var chargeCheck = document.getElementById('charge');
// console.log(total);
// Rendering default page
// One page shows 16 courses
var pageNum = 0;
var lenPerPage = 16;
// Rendering page nav
// Geting element pagenav, span page
var pageNav = document.getElementById('pagenav');
var pageSeq = pageNav.getElementsByClassName('pagesequence')[0];
// console.log(pageNav, pageSeq);
var pageSpan;
var total, maxPage;
// get firstPage and last page
var firstBtn = pageNav.querySelector('#first');
var lastBtn = pageNav.querySelector('#last');
// console.log(firstBtn, lastBtn);
// get different price range from priceList we have defined before
var priceLis = priceList.getElementsByTagName('li');
// console.log(priceLis);
// Rendering course to the page
getCourse(newCourseUrl);
// updatePageSeq()
updatePageSeq();
/*
Next Page funtion, when click next page button
the page turns to the next page
Previous page funciton, when click previous button,
the page turns to the previous page
*/
var previous = pageNav.querySelector('#pre');
var next = pageNav.querySelector('#next');
// console.log(previous, next);
next.onclick = function () {
pageNum++;
shiftPage();
}
previous.onclick = function () {
pageNum--;
shiftPage();
}
/*
Click firstBtn and lastBtn, the page jumps to first page and last page
*/
firstBtn.onclick = function () {
pageNum = 0;
shiftPage();
}
lastBtn.onclick = function () {
pageNum = maxPage - 1;
shiftPage();
}
// Add click event to the free label
label[0].onclick = function () {
// If free is checked, charge should not be checked
chargeCheck.checked = freeCheck.checked ? false : chargeCheck.checked;
// console.log(freeCheck.checked);
if (freeCheck.checked) {
// filter data
newCourseUrl = courseUrl.filter(function (v, i) {
// console.log(v, i);
return v.price == 0;
});
} else {
newCourseUrl = courseUrl;
}
getCourse(newCourseUrl);
// update page number
updatePageSeq();
}
// add click event to the charge label
label[1].onclick = function () {
// if charge is checked, free should not be checked
freeCheck.checked = chargeCheck.checked ? false : freeCheck.checked;
if (chargeCheck.checked) {
newCourseUrl = courseUrl.filter(function (v, i) {
return v.price > 0;
});
} else {
newCourseUrl = courseUrl;
}
// console.log(newCourseUrl);
// Rendering data for the page
getCourse(newCourseUrl);
updatePageSeq();
}
// choose different price ranges, the page show course
// which price is in the right range
choosePriceRange(0, 0, 99999);
choosePriceRange(1, 1, 99);
choosePriceRange(2, 100, 499);
choosePriceRange(3, 500, 999);
choosePriceRange(4, 1000, 9999);
choosePriceRange(5, 10000, 99999);
function createPageSeq() {
var sequence = '';
for (var i = 0; i < maxPage; i++) {
sequence += '<span>' + (i + 1) + '</span>';
}
// give content to the pageSeq
pageSeq.innerHTML = sequence;
// The default page is one
pageSpan = pageSeq.getElementsByTagName('span');
// console.log(pageSpan);
// give current page active class
var currentPage = pageSpan[pageNum];
currentPage.className = 'active';
}
function getCourse(url) {
// Rendering data to course list
// show data we want to
// slice(startIndex, lastIndex)
// 0 - 15 16- 31 32 - 48
// startIndex: pageNum * lenPerPage
// lastIndex: (pageNum+1) * lenPerPage
var showCourse = url.slice(pageNum * lenPerPage, (pageNum + 1) * lenPerPage);
// console.log(showCourse);
var html = '';
for (var i = 0; i < showCourse.length; i++) {
html += `<li>
<a class="img">
<img src="${showCourse[i].img}" alt="course">
</a>
<h3>${showCourse[i].title}</h3>
<p>
共有<b id = "num">${showCourse[i].num}</b>人在学</span>
<em> | </em>
<span>￥<b id = "price">${showCourse[i].price}</b></span>
</p>
</li>`
}
// append html to courselist
courseList.innerHTML = html;
}
function shiftPage() {
// if page arrives at max page, stay in the max page
if (pageNum >= maxPage) {
alert('已经到达最后一页');
// stay in the last page
pageNum = maxPage - 1;
}
// if page arrives at the first page. stay in the first page
if (pageNum < 0) {
alert('已经是第一页!');
pageNum = 0;
}
getCourse(newCourseUrl);
for (var k = 0; k < pageSpan.length; k++) {
pageSpan[k].className = '';
}
currentPage = pageSpan[pageNum];
currentPage.className = 'active';
}
function clickEveryPage() {
for (var i = 0; i < pageSpan.length; i++) {
// save index
pageSpan[i].index = i;
pageSpan[i].onclick = function () {
pageNum = this.index;
shiftPage();
}
}
}
// add click event to priceLis
function choosePriceRange(index, startPrice, endPrice) {
priceLis[index].onclick = function () {
// fiter price from 1 to 99
newCourseUrl = courseUrl.filter(function (v, i) {
return (v.price >= startPrice && v.price <= endPrice)
});
//console.log(newCourseUrl);
// Rendering data for the page
getCourse(newCourseUrl);
updatePageSeq();
}
}
function updatePageSeq() {
// update page number
total = newCourseUrl.length;
// console.log(newTotal);
maxPage = Math.ceil(total / lenPerPage);
createPageSeq();
clickEveryPage();
}
});
6887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
