移动端CSDN会员页面复刻
在基于前端 HTML + CSS + JS（后期会细说） 以及 移动端Web开发 的学习中，内心不禁的激起了对于复刻移动端CSDN会员页面的欲望；
于是，在经历了接近 31hours 的不懈奋战中，终于大功告成啦；
说到这里，就首先给大家看一下关于这次项目的 WakaTime ，如图所示：
那么项目的具体实现效果如何呢？如下图所示，当然也可以通过点击【CSDN会员复刻】进行查看（请放心点击，毕竟我已经上传服务器啦！！！）
注意：如果是PC端查看，需要切换到移动Web开发模拟器进行查看，教程可参考Java系列技术之移动Web开发（从基础开始）第二章第1节
所以，今天所要介绍的内容就是：
一、项目文件准备
二、项目布局分析
三、项目功能实现
四、项目问题解决
一、前言
CSDN会员页面的复刻 纯属个人爱好，其目的只是为了检测我个人的开发能力，无商用，也无其他特殊目的；
当然，项目内仍然存在一些细节问题，比如代码简化，JS框架使用等都有待改进，所以我仍然需要向大家学习，也欢迎各位来访啦！！！😉😉
二、项目文件准备
在该项目开发的准备过程中，主要准备了相关的 index.html 、 css文件 、js文件 、 images文件 、lib文件 、uploads文件 和 favicon.icn图标 等，其具体如下：
1. lib文件使用
在项目开发中， lib文件 主要是用来存放引入外部样式的文件，这里的 lib文件 存储内容如下：
使用方式：
①寻找remixicon.css文件名称：
②引入方式：
<link rel="stylesheet" href="./lib/fonts/remixicon.css">；
③添加标签:
在网站中复制其标签以及标签类名；
注意：在Java系列技术之CSS进阶（从基础开始）① 中有介绍四个可以免费使用的图标库网站，可以 点击 进行查看哟！！!
2. CSS基础样式
添加base.css文件，并引入：
<link rel="stylesheet" href="./css/base.css">
其中base.css代码段为：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 16px/1.5 sans-serif;
color: #333;
background-color: #fff;
}
li {
list-style: none;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #5eb69c;
}
img {
width: 100%;
vertical-align: middle;
}
input {
padding: 0;
border: none;
outline: none;
color: #333;
}
button {
cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3. 图片处理
至于图片免费处理的网站，之前分享的 Java系列技术之Web项目开发与上传（静态版）第二章第1节 都有介绍;
可以 点击 进行查看；
4. HTML移动端适配
方法：检查 HTML文档 是否含有 视口标签，如果有，即过；如果没有，便添加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
目的：方便在PC端开发的Web页面能够在移动端适配并进行展示；
三、项目布局分析
1. 页面总体布局
本项目页面在宽度上是100%铺满，而在高度上因为是可以滑动的状态，所以可以定义为由内容自动撑开高度，那么整体页面不设置高度，具体布局如图所示：
在页面非交互状态下主要八块区域，分别是：页面头部导航区 、用户信息区 、充值选项卡区 、支付方式区 、会员权益信息区 以及页面底部的 活动计时区 和 支付区 、还有右侧 固定活动区 ；
动态页面总是需要有交互的需求，所以，在交互状态下，又分有三个弹窗区域：导航栏下拉框 、会员权益说明弹窗 和 账单明细弹窗；
2. header布局
由于header区域是顶部导航栏，所以它需要的是固定在页面的顶部，而不随页面的上下滚动而移动，这样就需要利用 position: fixed 对其进行固定的定位布局；
由于header含有logo区域、搜索框区域、App链接区域以及分割线和菜单栏，同时也需要这些元素在一行对齐排列，那么对header区域就要添加：
display: flex;
justify-content: space-between;
这样做的优点是：便于适配各种宽高的设备，且不会导致元素脱标；
具体实现效果如下：
3. main_cont布局
此区域主要分有 top 、tabs 、payways 和 vipcards四个部分，但是每个部分的宽都是铺满于页面的宽度，且这四个部分在一列对齐排布，所以不能给main_cont设置高度（图片是为了满足视觉效果，添加了一个100%高度值，项目中需要删除）
由于该区域需要固定于头部导航栏下方，所以需要用到 “子绝父相” ；
即给body添加：
position: relative;
给main_cont添加：
position: absolute;
具体实现效果如下：
3.1 top布局
该区域为main_cont的第一部分，也是一个为了展示用户信息的区域，这里需要注意的一点就是，头像需要进行从中心等比例扩大的方法，不然就会太小了，我这里用到了scale；
即给.user_logo的img标签添加了
scale: 1.35;
具体实现效果如下：
3.2 tabs布局
该区域为main_cont的第二部分，是一个让用户选择充值卡区域，一共有上、下、两边四个区域和下区域的四个选择卡项，这里就需要将两边区域进行绝对定位，上下区域通过改变主轴进行同列对齐，添加的代码为：
display: flex;
flex-direction: column;
同时，在下区域需要四个选择卡项可以在一行对齐排列，这里就需要用到了浮动：
float: left;
其中第二个 < li > 标签中要赋予一个伪元素::before，来实现活动效果，代码如下：
.main_cont .tabs .tabs_bd ul li:nth-child(2)::before{
content: "送1年+抽豪礼";
position: absolute;
top: -9px;
width: 81px;
height: 18px;
font-size: 12px;
color: #fff;
border-radius: 9px 9px 9px 0;
background: #fc5531;
}
具体实现效果如下：
3.3 payways布局
该区域为main_cont的第三部分，是一个让用户自行选择支付软件的区域，一共有上、中、下三个区域和中区的四个选项，其中余额选项要单独列出来，因为其样式与其他三个选项的样式相异；
然后这里就需要注意的就是pay_bd标签的高度设置，因为合适的高度才能隐藏后两项的选项，从而可以搭配JS实现内容折叠效果；
此处我设置的高度为：
height: 80px;
因为每个 < li > 标签中的内容都是左右两边对齐+垂直对齐的，所以这里就需要给每个< li > 标签添加Flex布局，即：
display: flex;
justify-content: space-between;
align-items: center;
具体实现效果如下：
3.4 vipcards布局
该区域为main_cont的第四部分，是一个让用户了解会员权益信息的区域，一共有上、下两个区域，但是需要注意的是，这里因为内容要撑开网页的高度，所以 .main_cont标签 的100%高要清除了；
这个区域没有说明需要注意的点，不过由cont_open标签链接的弹窗需要留意，因为其属于功能实现，所以后面会介绍这个弹窗；
具体实现效果如下：
4. footer布局
此区域是固定在页面底部的，所以其定位是使用position: fixed 固定定位来实现，当然在底部区域要注意的就是 价格 和 折扣 以及 相关的支付费用标签 数值是需要后期配合JS动态变动的，所以它们使用的标签需要单独列出来，如：
<span id="dis_font">已减<span id="discount">50.00</span>元，</span>
在这块区域中，分为了上、下两个部分，其中上区域布局又分为左右两块，下区域布局也分为左右两块，具体布局图如下所示：
5. down_cont布局
down_cont布局是指下拉框的布局，本项目中就含有一个下拉框，下拉框的需求是宽高都铺满当前页面，并处于最顶层，所以它的定位布局实现方式一般采用 position: fixed; 固定定位；
并搭配宽高均设为100%比例，这样就可以适配所有设备的屏幕宽高了；
具体实现效果如下：
6. pop布局
pop布局就是指弹窗的布局，本项目中含有两个弹窗，分别是 会员权益说明弹窗 、账单明细弹窗，但这两个弹窗的布局是相同的，只是内容有所差异；
而对于弹窗是需要配合JS才能被调用显示的，所以这里需要注意的问题主要就是定位问题，由于弹窗需要出现在页面的最上层，所以其定位往往被设置成 position: fixed; 固定定位；
同时，弹窗的显示方式也是通过元素上浮来实现的；
具体实现效果如下：
四、项目功能实现
因为本项目所有动态功能都是用JS实现的，所以，这里就直接介绍JS所实现的具体功能啦！！！
功能样式均以GIF呈现给大家，有需要的也可以通过点击【CSDN会员复刻】进行查看哟！！！
1. 下拉菜单
具体代码段：
var header = document.getElementById("header");
var downcont = document.getElementById("downcont");
var menu = document.getElementById("menu");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var count = 0;
// 下拉菜单
menu.onclick = function () {
if (count == 0) {
header.style.boxShadow = "none";
downcont.style.marginTop = "150px";
img1.style.visibility = "hidden";
img2.style.visibility = "visible";
count = 1;
}
else {
header.style.boxShadow = "0 2px 4px 0 rgb(0 0 0 / 5%)";
downcont.style.marginTop = "-200%";
img2.style.visibility = "hidden";
img1.style.visibility = "visible";
count = 0;
}
}
实现效果：
2. 充值选项移动
具体代码段：
// 选项卡移动
var left = document.getElementById("left");
var right = document.getElementById("right");
var move = document.getElementById("listmove");
left.onclick = function () {
move.style.marginLeft = "-100px";
}
right.onclick = function () {
move.style.marginLeft = "0";
}
实现效果：
3. 支付方式选择
具体代码段：
// 更多支付选项
var paymore = document.getElementById("paymore");
var paybd = document.getElementById("paybd");
paymore.onclick = function () {
paybd.style.height = "165px";
this.style.height = "0";
}
// 支付选中
var ularr2 = paybd.getElementsByTagName("ul");
var oList2 = ularr2[0].querySelectorAll("li");
var iMg3 = document.getElementById("img3");
var iMg4 = document.getElementById("img4");
var iMg5 = document.getElementById("img5");
for (var i = 0; i < oList2.length; i++) {
oList2[i].index = i;
oList2[i].tag = false;
oList2[i].onclick = function () {
// alert(this.index);
if (this.tag == false) {
if (this.index == 0) {
iMg3.style.visibility = "visible";
iMg4.style.visibility = "hidden";
iMg5.style.visibility = "hidden";
}
else if (this.index == 1) {
iMg4.style.visibility = "visible";
iMg3.style.visibility = "hidden";
iMg5.style.visibility = "hidden";
}
else {
iMg5.style.visibility = "visible";
iMg4.style.visibility = "hidden";
iMg3.style.visibility = "hidden";
}
this.tag = true;
}
else {
if (this.index == 0) {
iMg3.style.visibility = "visible";
iMg4.style.visibility = "hidden";
iMg5.style.visibility = "hidden";
}
else if (this.index == 1) {
iMg4.style.visibility = "visible";
iMg3.style.visibility = "hidden";
iMg5.style.visibility = "hidden";
}
else {
iMg5.style.visibility = "visible";
iMg4.style.visibility = "hidden";
iMg3.style.visibility = "hidden";
}
this.tag = false;
}
}
}
实现效果：
4. 弹窗打开/关闭
具体代码段：
// 权益信息弹窗
var contopen = document.getElementById("cont_open");
var popcont1 = document.getElementById("popcont1");
contopen.onclick = function () {
close1.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
close1.style.zIndex = "99";
popcont1.style.zIndex = "100"
popcont1.style.bottom = "0";
}
popcont1.onclick = function () {
close1.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
close1.style.zIndex = "99";
popcont1.style.zIndex = "100"
popcont1.style.bottom = "0";
}
// 明细弹窗
var detailopen = document.getElementById("detail_open");
var popcont2 = document.getElementById("popcont2");
detailopen.onclick = function () {
close1.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
close1.style.zIndex = "99";
popcont2.style.zIndex = "100"
popcont2.style.bottom = "-18%";
}
popcont2.onclick = function () {
close1.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
close1.style.zIndex = "99";
popcont2.style.zIndex = "100"
popcont2.style.bottom = "-18%";
}
// 关闭弹窗
var close1 = document.getElementById("close1");
var close2 = document.getElementById("close2");
close1.onclick = function () {
this.style.backgroundColor = "rgba(0, 0, 0, 0)";
close1.style.zIndex = "-2";
popcont1.style.bottom = "-60%";
popcont2.style.bottom = "-60%";
}
close2.onclick = function () {
this.style.backgroundColor = "rgba(0, 0, 0, 0)";
close1.style.zIndex = "-2";
popcont1.style.bottom = "-60%";
popcont2.style.bottom = "-60%";
}
实现效果：
5. 活动倒计时
具体代码段：
// 时间倒计时
var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var second = document.querySelector(".second");
var inputTime = +new Date("2022/08/18 13:20:00");
countDown();
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();
if((inputTime - nowTime)<=0){
inputTime=inputTime+86400000;
var times = (inputTime - nowTime) / 1000;
}
else{
var times = (inputTime - nowTime) / 1000;
}
var h = parseInt(times / 60 / 60 % 24);
hour.innerHTML = h < 10 ? "0" + h : h;
var m = parseInt(times / 60 % 60);
minute.innerHTML = m < 10 ? "0" + m : m;
//计算描述 转化为整数
var s = parseInt(times % 60);
second.innerHTML = s < 10 ? "0" + s : s;
}
实现效果（2倍速）：
6. 滑动隐藏导航栏
具体代码段：
// 滑动隐藏导航栏
var new_scroll_position = 0;
var last_scroll_position;
var header = document.getElementById("header");
window.addEventListener('scroll', function(e) {
last_scroll_position = window.scrollY;
// Scrolling down
if (new_scroll_position < last_scroll_position && last_scroll_position > 80) {
// header.removeClass('slideDown').addClass('slideUp');
header.classList.remove("slideDown");
header.classList.add("slideUp");
// Scrolling up
} else if (new_scroll_position > last_scroll_position) {
// header.removeClass('slideUp').addClass('slideDown');
header.classList.remove("slideUp");
header.classList.add("slideDown");
}
new_scroll_position = last_scroll_position;
});
实现效果：
7. 充值选项系列功能
在充值选项选择的过程中，其对应的功能主要也会涉及到 充值选项的选择 、折扣优惠值的调用 、创建折扣提示信息 、明细详情 以及 总价值计算 和 活动时间展示及取消
具体代码段：
// 充值选项卡
var tabsbd = document.getElementById("tabsbd");
var ularr1 = tabsbd.getElementsByTagName("ul");
var oList1 = ularr1[0].querySelectorAll("li");
var price1 = document.getElementById("price1").innerHTML;
var price2 = document.getElementById("price2").innerHTML;
var price3 = document.getElementById("price3").innerHTML;
var price4 = document.getElementById("price4").innerHTML;
var money = document.getElementById("money");
var footer = document.getElementById("footer");
var footerhd = document.getElementById("footerhd");
var footerbd = document.getElementById("footerbd");
// 折扣优惠值(有数据库话就可以直接从数据库调用)
var dct1 = 0;
var dct2 = 50;
var dct3 = 0;
var dct4 = 0;
// 创建span
var span = document.createElement("span");
// 明细详情
var detail1 = document.getElementById("detail1");
var detail2 = document.getElementById("detail2");
var detail3 = document.getElementById("detail3");
var num = document.getElementById("num");
var dtl = money.innerHTML;
// 购买信息
var ubl = document.getElementById("user_balance");
var dis_font = document.getElementById("dis_font");
var discount = document.getElementById("discount");
var dic = discount.innerHTML;
// 充值选项卡关联数值
function BL1() {
for (var j = 0; j < oList1.length; j++) {
if (oList1[j].style.background = "#fff9f1") {
oList1[j].style.background = "#fff";
oList1[j].style.border = "1px solid #e8e8ed";
}
}
}
for (var i = 0; i < oList1.length; i++) {
oList1[i].index = i;
oList1[i].tag = false;
var user = ubl.innerHTML;
var pt = 0;
oList1[i].onclick = function () {
if (ubl.innerHTML == "暂无余额") {
ubl.innerHTML = "暂无余额";
user = 0;
}
else {
user = ubl.innerHTML;
}
function pay1() {
dtl = money.innerHTML;
dic = discount.innerHTML;
detail1.innerHTML = "¥" + dtl;
detail2.innerHTML = "-¥0.00";
num.innerHTML = "¥" + dtl;
}
function pay2() {
dtl = money.innerHTML;
dic = discount.innerHTML;
detail2.innerHTML = "-¥" + dic;
num.innerHTML = "¥" + dtl;
}
function passtime() {
if (pt == 0) {
footerhd.style.visibility = "hidden";
footerbd.style.marginTop = "-37px";
footer.style.height = "91px";
}
else {
footerhd.style.visibility = "visible";
footerbd.style.marginTop = "0px";
footer.style.height = "128px";
}
}
if (this.tag == false) {
if (this.index == 0) {
if (dct1 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price1 * 1).toFixed(0) + ".00";
pay1();
pt = dct1;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct1).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price1 * 1 - dct1 - user).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price1 * 1).toFixed(0) + ".00";
pay2();
pt = dct1;
passtime();
}
}
else if (this.index == 1) {
if (dct2 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price2 * 24).toFixed(0) + ".00";
pay1();
pt = dct2;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct2).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price2 * 24 - dct2).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price2 * 24).toFixed(0) + ".00";
pay2();
pt = dct2;
passtime();
}
}
else if (this.index == 2) {
if (dct3 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price3 * 12).toFixed(0) + ".00";
pay1();
pt = dct3;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct3).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price3 * 12 - dct3).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price3 * 12).toFixed(0) + ".00";
pay2();
pt = dct3;
passtime();
}
}
else {
if (dct4 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price4 * 24).toFixed(0) + ".00";
pay1();
pt = dct4;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct4).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price4 * 24 - dct4).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price4 * 24).toFixed(0) + ".00";
pay2();
pt = dct4;
passtime();
}
}
BL1();
this.style.background = "#fff9f1";
this.style.border = "1px solid #b87100";
this.tag = true;
}
else {
if (this.index == 0) {
if (dct1 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price1 * 1).toFixed(0) + ".00";
pay1();
pt = dct1;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct1).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price1 * 1 - dct1).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price1 * 1).toFixed(0) + ".00";
pay2();
pt = dct1;
passtime();
}
}
else if (this.index == 1) {
if (dct2 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price2 * 24).toFixed(0) + ".00";
pay1();
pt = dct2;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct2).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price2 * 24 - dct2).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price2 * 24).toFixed(0) + ".00";
pay2();
pt = dct2;
passtime();
}
}
else if (this.index == 2) {
if (dct3 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price3 * 12).toFixed(0) + ".00";
pay1();
pt = dct3;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct3).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price3 * 12 - dct3).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price3 * 12).toFixed(0) + ".00";
pay2();
pt = dct3;
passtime();
}
}
else {
if (dct4 == 0) {
dis_font.innerHTML = "";
money.innerHTML = (price4 * 24).toFixed(0) + ".00";
pay1();
pt = dct4;
passtime();
}
else {
dis_font.appendChild(span);
span.setAttribute("id", "discount");
discount.innerHTML = (dct4).toFixed(0) + ".00";
dic = discount.innerHTML;
dis_font.innerHTML = "已减" + dic + "元，";
money.innerHTML = (price4 * 24 - dct4).toFixed(0) + ".00";
detail1.innerHTML = "¥" + (price4 * 24).toFixed(0) + ".00";
pay2();
pt = dct4;
passtime();
}
}
BL1();
this.style.background = "#fff9f1";
this.style.border = "1px solid #b87100";
this.tag = false;
}
}
}
实现效果：
五、项目问题解决
本项目开发的过程中，遇到了很多浏览器兼容的问题，或许是PC端和移动端无法兼容，又或许是无法同时在IOS系统、安卓系统以及鸿蒙系统无法兼容，但是问题的存在是一定存在解决方案的，所以这次开发主要遇到的问题为：
1. 背景图兼容各尺寸屏幕
这里我就选择给背景图的框架添加
background-size:cover;
overflow: hidden;
同时需要设置其父级body宽度为100%；
2. 时间显示兼容
对于时间Date()方法的调用，一开始我采用的是
var inputTime = +new Date("2022-08-18 13:20:00");
但是这种格式只能兼容于安卓系统和鸿蒙系统，在IOS系统就只能显示为NaN乱码啦；
处理方式：
var inputTime = +new Date("2022/08/18 13:20:00");
此格式可兼容各种系统。
3. 页面布局问题
在整个项目的页面布局中，会产生弹窗穿插在主页的问题，如部分图所示：
处理方式：
添加 子绝父相 的定位方法，给其父级添加 position: relative; ，给其添加
position: absolute;
z-index: 层数;
从而达到不同弹窗的页面在不同的层数上进行显示，而解决不会穿插于主内容之间的问题；
总结
这也算是对于整个 HTML+CSS+JS 的总结了，以下便是我对于前端项目开发的理解，和我一样在学习前端的小伙伴们也可以参考一下啦！
这是我项目的源码库，可以 点击访问 我的Github下载哟！！！
以上就是所要介绍的 CSDN会员复刻页面项目开发，完成整个项目之后， 后续仍将继续更新学习的目标。感谢关注和支持，让我们一起成长！
有兴趣可回顾一下CSS基础学习的文章内容，再结合之前所介绍的CSS进阶学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！