$(document).ready(async function () {
// 争对小屏幕触屏设备
if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$('.centerRight').remove();
$('.notice,.message').remove();
}
// 针对所有触屏设备
if ('ontouchstart' in window || navigator.msMaxTouchPoints) {}
// 针对大屏幕触屏设备
if (/iPad/i.test(navigator.userAgent)) {}
//token登录
await $.ajax({
type: "post",
url: "/isLogin",
data: {
token: window.localStorage.token
},
success: function (response) {
if (response.isLogin == true) {
//登录成功 更新本地资源
$('.webInfors').prepend(`<div class="finLogTime"> <span>LAST LOGIN:</span><span class="finLogTime_number">${timeSet(response.user.userFinLog)}</span></div>`);
$('.centerRightTopPart1_number').html(`${response.user.number1}`);
$('.centerRightTopPart2_number').html(`${response.user.number2}`);
$('.centerRightTopPart3_number').html(`${response.user.number3}`);
$('.centerRightTopPart4_number').html(`${response.user.number4}`);
window.localStorage.token = response.token
if (response.user.headImg == 'NaN') {
$('#loginButton').remove();
$('#userHead').prepend(`<a userName="${response.user.userName}" class="toPerson" href="/person"><svg viewBox="0 0 1024 1024"><path d="M512 538.1c130.9 0 237-106.1 237-237s-106.1-237-237-237-237 106.1-237 237 106.1 237 237 237z m0 110.6c-218.2 0-395.1 69.7-395.1 155.6S293.8 960 512 960s395.1-69.7 395.1-155.6S730.2 648.7 512 648.7z" fill="#707070"></path></svg></a>`);
} else {
$('#loginButton').remove();
$('#userHead').prepend(`<a userName="${response.user.userName}" class="toPerson" href="/person"><svg viewBox="0 0 1024 1024"><path d="M512 538.1c130.9 0 237-106.1 237-237s-106.1-237-237-237-237 106.1-237 237 106.1 237 237 237z m0 110.6c-218.2 0-395.1 69.7-395.1 155.6S293.8 960 512 960s395.1-69.7 395.1-155.6S730.2 648.7 512 648.7z" fill="#707070"></path></svg></a>`);
$('.toPerson>svg').remove();
if (response.user.headImg == 'NaN.png') {
$('.toPerson').prepend('<img src="/head/staticIMG/' + response.user.headImg + '">');
} else {
$('.toPerson').prepend('<img src="/head/' + response.user.headImg + '">');
}
}
// 登录状态下即会有退出登录按钮
$('#userHead').after('<div class="head-part"><span><a href="/findPassword">找 回 密 码</a></span><span id="outLogin">退 出 登 录</span></div>');
if ('ontouchstart' in window || navigator.msMaxTouchPoints) {
// 针对所有触屏设备
$('.head-part').toggleClass('head-part02');
$('.head-part02').removeClass('head-part');
$('.head-part02').css({
'position': 'fixed',
'right': '0',
'font-size': '17px',
'width': '100px',
'display': 'none'
});
$('.toPerson').removeAttr('href');
$('.head-part02').prepend(`<span><a href="/person">个 人 主 页<a></span>`);
$('.head').click(function () {
$('.head-part02').show();
$('.head-part02').after('<div class="mask02"></div>');
$('.mask02').click(function () {
$('.mask02').remove();
$('.head-part02').hide();
window.event.stopPropagation()
});
window.event.stopPropagation()
});
} else {
// 针对所有非触屏设备
$('.head-part').css({
'left': -$('.head-part')[0].clientWidth / 2 + $('.head')[0].clientWidth / 2,
'top': $('.head')[0].clientHeight + 'px',
'display': 'none'
});
$('.head').hover(function () {
$('.head-part').show();
}, function () {
$('.head-part').hide();
});
}
//点击退出登录按钮本地去除本地缓存
$('#outLogin').click(function () {
window.localStorage.removeItem('token')
location.href = 'http://localhost:3000/'
});
} else {
// 登录失败
$('.head-part').remove();
//自动清除本地缓存
window.localStorage.removeItem('token')
}
}
});
// 请求静态文件
await $.ajax({
type: "post",
url: "/webIndexStatic",
success: function (response) {
//创建大模块以及内部的小模块 并且进行事件绑定
for (let i = 0; i < response.largeModule.length; i++) {
$('.centerLeftTop').append(`<span bigMid="${response.largeModule[i].bigMid}" onclick="bigPart(this)" class="centerLeftTopButton centerLeftTopButtonIsHot"><span class="bigMname">${response.largeModule[i].bigMname}</span><div class="centerLeftTopButton_smallbuttons"><div class="smallbuttons_white"></div></div></span>`)
//加蒙版的思路
if ('ontouchstart' in window || navigator.msMaxTouchPoints) {
$(".centerLeftTopButton:nth(" + i + ")").append(`<span class="bigMmask" onclick="bigMmask(this)"></span>`);
} else {
// 各个大模块绑定鼠标滑过事件
$($($(".centerLeftTopButton")[i])).hover(function () {
// over
$(this).find('.centerLeftTopButton_smallbuttons').stop().show();
}, function () {
// out
$(this).find('.centerLeftTopButton_smallbuttons').stop().hide();
})
}
//创建小模块以及进行事件绑定
for (let j = 0; j < response.largeModule[i].smallM.length; j++) {
$('.centerLeftTopButton_smallbuttons:nth(' + i + ')').find('.smallbuttons_white').after(`<span id="${response.largeModule[i].smallM[j].smallMid}" onclick="smp(this)" class="smp">${response.largeModule[i].smallM[j].smallMname}</span>`)
}
// 每个大模块内部添加一个小模块并且进行事件绑定
$('.centerLeftTopButton_smallbuttons:nth(' + i + ')').append('<span onclick="centerLeftTopButtonAdd(this)" class="centerLeftTopButtonAdd"><svg t="1612847930683" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="5052"><path d="M0 128C0 57.6 57.6 0 128 0h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128H128C57.6 1024 0 966.4 0 896V128z m64 0v768c0 32 25.6 64 64 64h768c32 0 64-25.6 64-64V128c0-32-25.6-64-64-64H128c-38.4 0-64 25.6-64 64z" fill="#8a8a8a" p-id="5053"></path><path d="M256 512.8c0-19.2 12.8-32 32-32h447.2c19.2 0 32 12.8 32 32s-12.8 32-32 32h-448c-19.2 0-31.2-12.8-31.2-32z" fill="#8a8a8a" p-id="5054"></path><path d="M511.2 256.8c19.2 0 32 12.8 32 32V736c0 19.2-12.8 32-32 32s-32-12.8-32-32V288.8c0-19.2 12.8-32 32-32z" fill="#8a8a8a" p-id="5055"></path></svg></span>')
}
// 热榜
for (let i = 0; i < response.hotList.length; i++) {
$('.chart').append(`<div class="toArticleDetail" articleId="${response.hotList[i].id}"><span>NO.${(i + 1)}
<span style="color: black;font-weight: 100;font-size: 12px;">${response.hotList[i].bigmname}${response.hotList[i].bigmname=='树洞'? '':'/'}${response.hotList[i].smallname}</span>
</span><span title="${response.hotList[i].name}">${response.hotList[i].name}</span>
</div>`);
$('.toArticleDetail:nth(' + i + ')').click(function () {
window.location.href = `http://localhost:3000/article?articleId=${response.hotList[i].id}`
});
}
$('.webInfors').append(`
<div class="webInfors_regNumber"><span>注册人数：</span><span class="webInfors_regNumber_number">${response.usernumber}</span></div>
<div class="webInfors_articleNumber"><span>文章总数：</span><span class="webInfors_articleNumber_number">${response.articlenumber}</span></div>
<div class="webInfors_webNumber"><span>备案号：</span><span class="webInfors_webNumber_number"><a href="http://beian.miit.gov.cn">闽ICP备2020019079号</a></span></div>
`);
}
});
$('.centerLeftBottom').append('<section class="commentSection_wait"><span class="commentSection_wait_loader"> </span></section>')
// 刚刷新时候就应该执行查询广场事件
await $.ajax({
type: "post",
url: "/mainApp/toSquare",
data: {
token: window.localStorage.token
},
success: function (response) {
$('.centerLeftBottom>.commentSection_wait').remove();
// 部分元素有待继续补充
for (let i = 0; i < response.articles.length; i++) {
square_smallPart_create(i, response, i)
}
//首次刷新的时候加上一个待接点
$('.contentSmallPart:nth(' + ($(".contentSmallPart").length - 1) + ')').addClass('waitAfter');
}
});
// 点击TOP按钮发送的事件
var posPast
$(".Totop").click(function () {
posPast = $("html")[0].scrollTop;
$("html").animate({
scrollTop: "0px"
}, 100, function () {
$(".backPast").fadeIn(400)
setTimeout(() => {
$(".backPast").hide();
}, 5000);
});
});
// 点击backPast按钮发送的事件
$('.backPast').click(function () {
$('.backPast').hide();
$("html").animate({
scrollTop: posPast + "px"
}, 100)
});
// 懒加载的实现
$(window).scroll(function () {
TopButtonShowHide()
if ($('.contentSmallPart').length == 0) {
//一定不进行懒加载事件
return
}
if ($(this).scrollTop() + $(this).height() >= $(document).height()) {
//触底则进行懒加载事件
switch ($('#square').attr('isactive')) {
case 'true':
//广场的懒加载
switch ($('.navigation').length == 0) {
case true:
if ($('.centerLeftBottom>.commentSection_wait')[0]) {
return
}
slideFlushBytime('squareMway')
break;
case false:
switch ($('.navigation-smallM')[0].innerText.length == 0) {
case true:
//大模块的刷新
if ($('.centerLeftBottom>.commentSection_wait')[0]) {
return
}
slideFlushBytime('bigMway', $('.navigation-bigM').attr('bigmid'), $('.navigation-smallM').attr('smallmid'))
break;
case false:
//小模块的刷新
if ($('.centerLeftBottom>.commentSection_wait')[0]) {
return
}
slideFlushBytime('smallMway', $('.navigation-bigM').attr('bigmid'), $('.navigation-smallM').attr('smallmid'))
break;
default:
break;
}
break;
default:
break;
}
break;
case 'false':
//树洞的懒加载
if ($('.centerLeftBottom>.commentSection_wait')[0]) {
return
}
slideFlushBytime_shuDong('shuDongMway')
break;
default:
break;
}
}
});
//树洞按钮点击事件
$('#toShudong').click(function () {
$('.backPast').hide();
$('.centerLeftTop').hide();
$(window).scrollTop(0)
// 小蓝条的一个切换
$('#square').attr('isactive', false)
$('#toShudong').attr('isactive', true)
if ($('.navigation')) {
$('.navigation').remove();
}
if ($('.addArticle')) {
$('.addArticle').remove();
}
if ($('.contentSmallPart')) {
$('.contentSmallPart').remove();
}
$('.centerLeftBottom').append('<section class="commentSection_wait"><span class="commentSection_wait_loader"> </span></section>')
$.ajax({
type: "post",
url: "/mainApp/toshuDong",
data: {
token: window.localStorage.token
},
success: function (response) {
$('.centerLeftBottom>.commentSection_wait').remove();
// 部分元素有待继续补充
for (let i = 0; i < response.articles.length; i++) {
shuDong_smallPart_create(i, response, i)
}
//首次刷新的时候加上一个待接点
$('.contentSmallPart:nth(' + ($(".contentSmallPart").length - 1) + ')').addClass('waitAfter');
}
});
});
// 广场按钮点击事件
$('#square').click(function () {
$('.backPast').hide();
$('.centerLeftTop').show();
$(window).scrollTop(0)
if ($('.navigation')) {
$('.navigation').remove();
}
if ($('.addArticle')) {
$('.addArticle').remove();
}
if ($('.contentSmallPart')) {
$('.contentSmallPart').remove();
}
$('.centerLeftBottom').append('<section class="commentSection_wait"><span class="commentSection_wait_loader"> </span></section>')
// 小蓝条的一个切换
$('#square').attr('isactive', true)
$('#toShudong').attr('isactive', false)
$.ajax({
type: "post",
url: "/mainApp/toSquare",
data: {
token: window.localStorage.token
},
success: function (response) {
$('.centerLeftBottom>.commentSection_wait').remove();
// 部分元素有待继续补充
for (let i = 0; i < response.articles.length; i++) {
square_smallPart_create(i, response, i)
}
}
});
});
// 进行创作中心入口的提示用户登录操作
$('#toWriter').click(function () {
if ($('#loginButton')[0]) {
//未登录
alert('请您先完成登录，谢谢')
} else {
location.href = 'http://localhost:3000/writer'
}
});
$('#loginButton').click(function () {
$('body').after('<div class="mask"></div>');
$('.mask').after('<div class="logReg"><div><div class="waitChange"><div class="logByAcc" name="账号登录？"><div><div><div><span>账号：</span><span><div><input type="text" id="userName"></div></span></div></div></div><div><div><div><span>密码：</span><span><div><input type="password" id="passWord"></div></span><a href="/findPassword">忘记密码？</a></div></div></div></div></div><div class="ChangeButton"><div><span>邮箱登录？</span><span>/</span><span>注册？</span></div></div></div><div><div id="logRegButton">登 录</div></div></div>');
$('html').css({
'overflow': 'hidden',
'margin-right': window.innerWidth - $('body')[0].offsetWidth + 'px'
});
$('.mask').click(function () {
$('.mask').remove();
$('.logReg').remove();
$('html').css({
'overflow': 'unset',
'margin-right': 'unset'
});
});
//登录 注册功能切换模块
$('.ChangeButton>div>span:nth-child(1),.ChangeButton>div>span:nth-child(3)').click(function () {
switch (this.innerText) {
case '邮箱登录？':
this.innerText = $('.waitChange>div').attr('name')
$('.waitChange>div').remove();
$('.waitChange').prepend('<div class="logByEmail" name="邮箱登录？"><div><div><div class="emailNum"><div>邮   箱：</div><div><div><input type="text" id="logEmail"></div></div></div></div><div><div><button id="yanzheng">获取验证码</button></div></div><div><div class="yanzheni"><div>验证码：</div><div><div><input type="text" id="logEmailNum"></div></div></div></div></div></div>');
$('#yanzheng').click(function () {
$('#logEmailNum')[0].placeholder = '未区分大小写'
if ($('#logEmail').val() == '') {
alert('请输入邮箱')
return
}
$('#yanzheng').attr('disabled', 'true');
$.ajax({
type: "post",
url: "login/loginEmail",
data: {
userEmail: $('#logEmail')[0].value
},
success: function (response) {
tokenWork(response)
}
});
for (let i = 0; i < 61; i++) {
setTimeout(() => {
$('#yanzheng').html(`(${60-i})秒`);
if (i < 60) {
$('#yanzheng').attr('disabled', 'true');
}
if (i == 60) {
$('#yanzheng').removeAttr('disabled');
$('#yanzheng').html('获取验证码');
}
}, i * 1000);
}
});
break;
case '注册？':
this.innerText = $('.waitChange>div').attr('name')
$('.waitChange>div').remove();
$('.waitChange').prepend('<div class="register" name="注册？"><div><div><div class="regemailNum"><div>邮   箱：</div><div><div><input type="text" id="email"></div></div></div></div><div><div><button id="regyanzheng">获取验证码</button></div></div><div><div class="regyanzheni"><div>验证码：</div><div><div><input type="text" id="regYanZhen"></div></div></div></div></div></div>');
$('#regyanzheng').click(function () {
$('#regYanZhen')[0].placeholder = "未区分大小写"
if ($('#email').val() == '') {
alert('请输入邮箱')
return
}
$.ajax({
type: "post",
url: "register",
data: {
email: $('#email')[0].value
},
success: function (response) {
tokenWork(response)
}
});
for (let i = 0; i < 61; i++) {
setTimeout(() => {
$('#regyanzheng').html(`(${60-i})秒`);
if (i < 60) {
$('#regyanzheng').attr('disabled', 'true');
}
if (i == 60) {
$('#regyanzheng').removeAttr('disabled');
$('#regyanzheng').html('获取验证码');
}
}, i * 1000);
}
});
break;
case '账号登录？':
this.innerText = $('.waitChange>div').attr('name')
$('.waitChange>div').remove();
$('.waitChange').prepend(`<div class="logByAcc" name="账号登录？"><div><div><div><span>账号：</span><span><div><input type="text" id="userName"></div></span></div></div></div><div><div><div><span>密码：</span><span><div><input type="password" id="passWord"></div></span><a href="/findPassword">忘记密码？</a></div></div></div></div>`);
break;
default:
break;
}
});
$('#logRegButton').click(function () {
if ($('#passWord').val() == '' || $('#regYanZhen').val() == '' || $('#logEmailNum').val() == '' || $('#userName').val() == '' || $('#logEmail').val() == '' || $('#email').val() == '') {
alert('请检查相关登录信息是否完整')
return
}
switch ($('.waitChange>div').attr('name')) {
case "账号登录？":
$.ajax({
type: "post",
url: "login/loginAcc",
data: {
userName: $('#userName')[0].value,
passWord: $('#passWord')[0].value
},
success: function (response) {
tokenWork(response)
if (response.isLogin == false) {
alert('请检查账户或密码')
}
}
});
break;
case "注册？":
$.ajax({
type: "post",
url: "register/registerCheck",
data: {
regYanZhen: $('#regYanZhen')[0].value,
userEmail: $('#email')[0].value
},
success: function (response) {
tokenWork(response)
}
});
break;
case "邮箱登录？":
$.ajax({
type: "post",
url: "login/loginEmailCheck",
data: {
userEmail: $('#logEmail')[0].value,
logEmailNum: $('#logEmailNum')[0].value
},
success: function (response) {
tokenWork(response)
if (response.isLogin == false) {
alert('请检查邮箱或验证码')
}
}
});
break;
default:
break;
}
});
window.event.stopPropagation()
});
// 热榜的展开与收起
$('.chartClose').click(function () {
$('.centerRight>div:nth-child(2)').hide(0, function () {
$('.centerRight>div:nth-child(1)').after('<span class="chartOpen">收起</span>');
$('.chartOpen').css({
"text-align": "center",
"position": "sticky",
"color": "rgb(9 133 10)",
"background-color": "rgb(173 194 189)",
"font-weight": "bold",
"top": "55px",
"margin-top": "3px"
}).html("展开");
$('.webInfors').css('top', '80px');
$(".chartOpen").click(function () {
$(".chartOpen").remove();
$(".centerRight>div:nth-child(2)").show();
$('.webInfors').css('top', '');
});
});
});
// 搜索框的变化
$(".searchPartInput>span:nth-child(1)>input").focus(function () {
$(".searchPartInputIconKEY").attr('fill', "#2680F0");
$('.searchPartInput>span').css({
"border-color": "#03a9f4"
});
});
$(".searchPartInput>span:nth-child(1)>input").blur(function () {
if ($(".searchPartInput>span:nth-child(1)>input")[0].value == "") {
$(".searchPartInputIconKEY").attr('fill', "#bfbfbf");
}
$('.searchPartInput>span').css({
"border": ""
});
});
$('.chartTitle_flesh').click(function () {
$('.chartTitle_flesh').css('animation', 'rotate 1s linear infinite');
$('.toArticleDetail').remove();
$('.chartTitle').append('<section class="commentSection_wait"><span class="commentSection_wait_loader"> </span></section>');
$('.chart>div:nth-child(1)').css('border-bottom', 'unset');
$.ajax({
type: "post",
url: "complete/hotFlesh",
success: function (response) {
for (let i = 0; i < response.length; i++) {
$('.chart').append(`<div class="toArticleDetail" articleId="${response[i].id}"><span>NO.${(i + 1)}
<span style="color: black;font-weight: 100;font-size: 12px;">${response[i].bigmname}${response[i].bigmname=='树洞'? '':'/'}${response[i].smallname}</span>
</span><span title="${response[i].name}">${response[i].name}</span>
</div>`);
$('.toArticleDetail:nth(' + i + ')').click(function () {
window.location.href = `http://localhost:3000/article?articleId=${response[i].id}`
});
}
$('.chartTitle_flesh').css('animation', 'unset');
$('.chartTitle>.commentSection_wait').remove();
$('.chart>div:nth-child(1)').css('border-bottom', '');
}
});
});
});
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
