-
Notifications
You must be signed in to change notification settings - Fork 0
/
progress.html
135 lines (129 loc) · 3.71 KB
/
progress.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>进度统计</title>
<style>
.toast-wrapper {
position: fixed;
width: 100%;
top: 20px;
}
.toast {
padding: 20px;
color: white;
background: #ff0062;
border-radius: 10px;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
max-width: 400px;
margin: 0 auto;
}
.animation {
opacity: 0;
animation: fade 4s ease;
}
@keyframes fade {
0% {
opacity: 0;
}
12.5% {
opacity: 0.5;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
87.5% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="toast-wrapper">
<div class="toast animation"></div>
</div>
</div>
<script>
const course = {
all: 131 /** 课程总节数 */,
hasLearned: 40 /** 初始化的已学习的节数 */,
todayTarget: 5 /** 今日需要完成的课程节数目标 */,
todayComplete: 0 /** 今日已学习完成课程节数 */,
};
/**
* 完成状态包括：
* 1: 未开始（'not started'）
* 2: 部分完成（'part complete'）
* 3. 已完成（'complete'）
* 4. 超额完成（'overComplete'）
*/
const learnHistory = [
{
date: "2021-07-06",
todayTarget: 5,
todayComplete: 0,
complete: "unfinished",
},
];
function getTodayDate() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
let monthStr = month === 0 || month >= 10 ? month : `0${month}`;
let dayStr = day === 0 || day >= 10 ? day : `0${day}`;
return `${year}-${monthStr}-${dayStr}`;
}
function countCompleteStatus() {
const historyCount = learnHistory
.map((item) => item.todayComplete)
.reduce(
(initCount, countItem) => initCount + countItem.todayComplete
);
const totalProgress =
(((course.hasLearned + historyCount) / course.all) * 100).toFixed(2) +
"%";
let todayProgress = 0;
const todayDate = getTodayDate();
const dateFindResult = learnHistory.find(
(item) => item.date === todayDate
);
if (dateFindResult) {
todayProgress =
(dateFindResult.todayComplete / dateFindResult.todayTarget).toFixed(
2
) + "%";
} else {
todayProgress = todayProgress.toFixed(2) + "%";
}
return {
allTarget: course.all,
totalProgress,
todayTarget: dateFindResult ? dateFindResult.todayTarget : 0,
todayProgress,
};
}
function toast() {
const { allTarget, totalProgress, todayTarget, todayProgress } =
countCompleteStatus();
const totalProgressDesc = `目标课程总共${allTarget}节，目前学习总进度：${totalProgress}；`;
const todayProgressDesc = `今日需要学习的课程共${todayTarget}节, 今天学习进度：${todayProgress}；`;
const elem = document.querySelector(".toast-wrapper .toast");
elem.textContent = totalProgressDesc + todayProgressDesc;
}
toast();
</script>
</body>
</html>