会员订阅与下载的功能，把过程做成一个【会员订阅系列】进行分享。内容先由简入门，上一篇实现了下载，今天实现前端显示条数。
文章目录
- 前言
- 一、会员订阅功能是什么？
- 二、使用步骤
-
- 1.引入库
- 2.JS代码
- 具体案例
- 总结
前言
知识付费现在已经完全在互联网上流行开了，从文章到小说、从创意到程序、从音乐到影视等等，都需要前后端的订阅控制，所以我们必须了如指掌，并且一学就会。
一、会员订阅功能是什么？
简而且概之就是，通过前端或后端让用户，根据会员等级看到相应的内容。这个权限可能是长期或一次性或多次性的。
二、使用步骤
1.引入库
//本节内容纯JS实现不用加入jquery库。
2.JS代码
//这里可以控制是否登录或订阅：true可展开；false不能展开
var isLoggedIn = true ;
document.addEventListener(“DOMContentLoaded”, function () {
//设定ID‘showMore’ 为按扭
var showMoreButton = document.getElementById(‘showMore’);
//获取id为table_down的表
var table = document.getElementById(‘table_down’);
var rows = table.rows;
//控制显示数据条数
var initialRowCount = 15;
//做一个全部显示的函数
function toggleRows() {
for (var i = 0; i < rows.length; i ) {
rows[i].style.display = (i < initialRowCount || isLoggedIn) ? ‘’ : ‘none’;
}
showMoreButton.style.display = (rows.length > initialRowCount && !isLoggedIn) ? ‘’ : ‘none’;
}
//点击ID为‘showMore’
showMoreButton.addEventListener(‘click’, function () {
//调用全部显示的函数
toggleRows();
});
//初始显示表的条数
for (var ii = 0; ii < rows.length; ii ) {
rows[ii].style.display = (ii < initialRowCount ) ? ‘’ : ‘none’;
}
});
具体案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>订阅显示例</title> <style> #showMore{ width:100%;text-align:center; width: 100%; padding-top: 78px; background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,0)),to(#fff)); background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 100%);cursor: pointer; position: relative; z-index: 996; padding-top: 160px; bottom: -1px; margin-top: -160px; color:#0c5081; } </style> </head> <body> <h1>控制显示数据条数</h1> <table class="sj" id="table_down"> <tbody> <tr><td><div class="t2">日期</div></td><td><div class="t2">现有确诊</div></td><td><div class="t2">累计确诊</div></td><td><div class="t2">治愈病例</div></td><td><div class="t2">死亡病例</div></td></tr> <tr><td>'2022-10-21'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-22'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-23'</td><td>82</td><td>2025</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-24'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-25'</td><td>84</td><td>2027</td><td>1940</td><td>3</td></tr><tr><td>'2022-10-26'</td><td>84</td><td>2027</td><td>1940</td
