完成房间pk榜单

This commit is contained in:
Dragon
2023-11-14 18:20:03 +08:00
parent 2e8e627fad
commit d0fd6d585c
4 changed files with 41 additions and 13 deletions

View File

@@ -50,7 +50,7 @@ body {
height: 1.21333rem; height: 1.21333rem;
background: url(../images/time.png) no-repeat; background: url(../images/time.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: absolute;
top: 11.18667rem; top: 11.18667rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -88,7 +88,7 @@ body {
width: 4.49333rem; width: 4.49333rem;
height: 1.02667rem; height: 1.02667rem;
position: relative; position: relative;
top: 10.8rem; top: 12.1rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }

View File

@@ -54,7 +54,7 @@ body {
height: px2rem(91); height: px2rem(91);
background: url(../images/time.png) no-repeat; background: url(../images/time.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: absolute;
top: px2rem(839); top: px2rem(839);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@@ -92,7 +92,7 @@ body {
width: px2rem(337); width: px2rem(337);
height: px2rem(77); height: px2rem(77);
position: relative; position: relative;
top: 10.8rem; top: 12.1rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }

View File

@@ -29,8 +29,8 @@
<img src="./images/title.png" alt="" class="title"> <img src="./images/title.png" alt="" class="title">
<!-- 切换 --> <!-- 切换 -->
<div class="tab"> <div class="tab">
<div class="tab1 act1"></div> <div class="tab1"></div>
<div class="tab2"></div> <div class="tab2 act2"></div>
<div class="tab3"></div> <div class="tab3"></div>
</div> </div>
<!-- 时间结束展示tab --> <!-- 时间结束展示tab -->

View File

@@ -27,6 +27,10 @@ const toastMsg = (content = '操作完成', time = 2) => {
}) })
} }
var leftTime;//倒计时暂存 var leftTime;//倒计时暂存
var timeOut2;//倒计时暂存
var rankType = 1;//1日榜2总榜
var date;//日期
var dateArr = [];//存放昨日和今日时间
// 初始化函数 // 初始化函数
$(function () { $(function () {
getInfoFromClient() getInfoFromClient()
@@ -47,22 +51,36 @@ $(function () {
window.webkit.messageHandlers.closeWebView.postMessage(null) window.webkit.messageHandlers.closeWebView.postMessage(null)
} }
}) })
getRank(); getRank(rankType, date);
}, 100) }, 100)
}) })
// 获取榜单接口 // 获取榜单接口
function getRank (rankType, date) { function getRank (rankType, date) {
$('.list li').remove(); $('.list li').remove();
// showLoading() showLoading()
networkRequest({ networkRequest({
type: 'get', type: 'get',
url: urlPrefix + '', url: urlPrefix + '/act/2023RoomPk/rank/getRank',
data: { rankType, date }, data: { rankType, date },
success (res) { success (res) {
if (res.code === 200) { if (res.code === 200) {
// 处理倒计时 // 处理倒计时
leftTime = res.data.endTime - res.timestamp; leftTime = res.data.endTime - res.timestamp;
if (rankType == 1) {
const curTime = res.timestamp
const endTime = (new Date(`${res.data.dateList[res.data.dateList.length - 1]} 23:59:59`).getTime())
const hadEnd = (endTime - curTime) <= 0
if (hadEnd) {
rankType = 2;
date = null;
getRank(rankType, date)
return
}
}
countup(); countup();
dateArr[0] = dateFormat(res.timestamp - 86400000, 'yyyy-MM-dd');
dateArr[1] = dateFormat(res.timestamp, 'yyyy-MM-dd');
// 处理前三 // 处理前三
var top3 = res.data.rankList.slice(0, 3); var top3 = res.data.rankList.slice(0, 3);
var notTop3 = res.data.rankList.slice(3); var notTop3 = res.data.rankList.slice(3);
@@ -112,8 +130,16 @@ function getRank (rankType, date) {
// 榜单切换 // 榜单切换
$('.tab div').click(function () { $('.tab div').click(function () {
var i = $(this).index() + 1; var i = $(this).index() + 1;
rankType = i == 1 || i == 2 ? 1 : 2;
$('.tab div').removeClass('act1').removeClass('act3').removeClass('act2'); $('.tab div').removeClass('act1').removeClass('act3').removeClass('act2');
$(this).addClass(`act${i}`) $(this).addClass(`act${i}`);
if (i == 1 || i == 2) {
date = dateArr[i - 1];
} else {
date = null;
}
getRank(rankType, date);
}) })
// 规则tab切换 // 规则tab切换
$('.rule .rule_in .tabs div').click(function () { $('.rule .rule_in .tabs div').click(function () {
@@ -149,7 +175,7 @@ function countup () {
var s = 0; var s = 0;
//定义变量 d,h,m,s保存倒计时的时间 //定义变量 d,h,m,s保存倒计时的时间
var d, h, m, s; var d, h, m, s;
if (leftTime >= 0) { if (leftTime > 0) {
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24)); d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24)); h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
m = getzf(Math.floor(leftTime / 1000 / 60 % 60)); m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
@@ -161,13 +187,15 @@ function countup () {
$('.time .sp4').text(d); $('.time .sp4').text(d);
leftTime = leftTime - 1000; leftTime = leftTime - 1000;
//递归每秒调⽤countTime⽅法显⽰动态时间效果 //递归每秒调⽤countTime⽅法显⽰动态时间效果
} else if (leftTime == 0) {
getRank(rankType, date);
return
} else { } else {
//todo 展示活动已结束
$('.timeOutTab').show(); $('.timeOutTab').show();
$('.timeOut').show(); $('.timeOut').show();
$('.tab').hide(); $('.tab').hide();
$('.time').hide(); $('.time').hide();
getRank(rankType, date);
return
} }
timeOut2 = setTimeout(countup, 1000); timeOut2 = setTimeout(countup, 1000);
} }