fix anim

optimize code

Author: L33Z22L11

css/cover.css

@@ -13,26 +13,24 @@
 
     padding: 1rem;
 
-    animation: splash 2s forwards;
+    animation: whiteSplash 2.5s forwards;
     text-align: center;
 
     color: #333;
     background: #fff fixed center url(https://a.xuewuzhibu.cn/24/656d964db3c37-24.png) no-repeat;
     background-size: 40vw;
 }
 
-@keyframes splash {
+@keyframes whiteSplash {
     0% {
-        display: flex;
-
         filter: brightness(10);
     }
 
-    40% {
+    50% {
         filter: brightness(1);
     }
 
-    80% {
+    90% {
         opacity: 1;
     }
 
@@ -56,8 +54,9 @@
     justify-content: space-between;
 
     transition: .5s;
-    /* background: #333 fixed center url(https://a.xuewuzhibu.cn/24/656ca7c42eb90-24.jpg); */
-    /* background-size: cover; */
+
+    background: #333 fixed center url(https://a.xuewuzhibu.cn/24/656ca7c42eb90-24.jpg);
+    background-size: cover;
 }
 
 #cover>* {
@@ -161,4 +160,39 @@
 
     background: #333 fixed center url(https://a.xuewuzhibu.cn/24/656ca7c42eb90-24.jpg);
     background-size: cover;
+}
+
+#cover .loadingBar {
+    position: relative;
+    overflow: hidden;
+}
+
+#cover .loadingBar::after {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+
+    display: block;
+
+    width: 100%;
+    height: 100%;
+
+    content: '';
+    animation: loadingBarMask 1s ease-in-out infinite;
+
+    background: #fff;
+    backdrop-filter: brightness(.6) contrast(3);
+
+    mix-blend-mode: exclusion;
+}
+
+@keyframes loadingBarMask {
+    0% {
+        left: -100%;
+    }
+
+    100% {
+        left: 200%;
+    }
 }

css/main.css

@@ -66,7 +66,7 @@ footer {
 /* 选中 */
 ::selection {
   background: rgba(255, 255, 255, .1);
-  text-shadow: #fa7 -.05em -.01em .1em, #f7a .05em .01em .1em;
+  text-shadow: #7af -.05em -.01em .1em, #a7f .05em .01em .1em;
 }
 
 /*
@@ -108,7 +108,7 @@ footer {
 
 @keyframes hilit {
   from {
-    color: #fa7;
+    color: #daf;
   }
 
   to {
@@ -295,7 +295,7 @@ a {
 
 a:hover {
   color: #fff !important;
-  background: linear-gradient(120deg, #fa7, #f7a);
+  background: linear-gradient(120deg, #7af, #a7f);
   box-shadow: .2em .2em .5em rgba(0, 0, 0, .2);
 }
 

index.html

@@ -60,7 +60,7 @@
     </div>
     <div class="space-between">
       <p>Tips: ?</p>
-      <p>Loading...</p>
+      <p class="loadingBar">Loading...</p>
     </div>
   </div>
 
@@ -94,13 +94,13 @@ <h2 id="mainslogan">考试时钟</h2>
               </div>
             </a>
             <div id="typelist" style="width:100%;">
-              <a onclick="subject.to(23)">23届</a>
-              <a onclick="subject.to(24)">高三日常</a>
-              <a onclick="subject.to(241)">高三理科</a>
-              <a onclick="subject.to(242)">高三文科</a>
-              <a onclick="subject.to(251)">高二物理</a>
-              <a onclick="subject.to(252)">高二历史</a>
-              <a onclick="subject.to(261)">高一</a>
+              <a onclick="subject.switch(23)">23届</a>
+              <a onclick="subject.switch(24)">高三日常</a>
+              <a onclick="subject.switch(241)">高三理科</a>
+              <a onclick="subject.switch(242)">高三文科</a>
+              <a onclick="subject.switch(251)">高二物理</a>
+              <a onclick="subject.switch(252)">高二历史</a>
+              <a onclick="subject.switch(261)">高一</a>
               <a onclick="setTemp()"><i class="fa-regular fa-square-plus"></i> 临时</a>
               <a onclick="setTimer()"><i class="fa-solid fa-stopwatch"></i> 倒计时</a>
 
@@ -227,7 +227,7 @@ <h2 id="mainslogan">考试时钟</h2>
         </p>
         <p><i class="fa-solid fa-hashtag"></i> 考试时钟相关疑问、需求或反馈请前往野生技协群：89 4656 456，多名管理在线回复</p>
         <p><i class="fa-solid fa-file-arrow-up"></i>
-          ver_7.0.1 ys & φ</p>
+          ver_7.0.2 优化部分源代码</p>
       </div>
     </footer>
   </div>

js/clock.js

@@ -5,19 +5,20 @@
 // 这里可以修改today.date
 // 测试结束后一定要删除测试数据
 // 否则“今天”就是today.date
-var today = new Date;
+let today = new Date;
 
 today = {
   date: today.getFullYear() + "-" + fixDigit(today.getMonth() + 1) + "-" + fixDigit(today.getDate()),
   week: parseInt((today - new Date(2022, 1, 6)) / 6048E5),
   day: today.getDay(),
   weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][today.getDay()],
   // 夏季作息：5月1日~9月30日
-  summer: today.getMonth() > 3 && today.getMonth() < 9,
+  isSummer: today.getMonth() > 3 && today.getMonth() < 9
 };
+console.log(today);
+
 // 各个对象内置功能
-var exam = {};
-var subject = {
+let subject = {
   get name() { return document.getElementById("subject").innerHTML; },
   set name(name) { document.getElementById("subject").innerHTML = name; },
   get duration() {
@@ -30,17 +31,18 @@ var subject = {
   // get _end() { },
   // set _end(end) { },
 };
-var slogan = {
-  // 这块有机会再写
 
+let exams = {};
 
+let slogan = {
+  // 这块有机会再写
 };
-var timer = {
-  // 这块也一样，有机会再写
-
 
+let timer = {
+  // 这块也一样，有机会再写
 };
-subject.to = function (to) {
+
+subject.switch = function (type) {
   // 切换类型时需要重置的内容
   if (SP.debug) now = new Date(0);
   this.name = "";
@@ -49,9 +51,13 @@ subject.to = function (to) {
   timer.progress = slogan.main = slogan.sub = slogan.subnum = 0;
   slogan.$main = "沉着冷静&emsp;诚信考试";
   slogan.$sub = [""];
-  this.on = to in exam ? to : this.on;
-  document.getElementById("type").innerHTML = exam[this.on]();
-  if (SP.debug == null) playCover("正在传送到坐标 <span class='shield'>?type=" + this.on + "</span>，请稍候");
+  this.current = type in exams ? type : this.current;
+  console.log(this.current);
+  exams[this.current]();
+  slogan.update();
+  document.getElementById("type").innerHTML = subject.type;
+
+  if (SP.debug == null) playCover("正在传送到坐标 <span class='shield'>?type=" + this.current + "</span>，请稍候");
   // document.getElementsByClassName("card")[0].style.filter = "blur(.5em)";
   // 想提升应用启动速度，就把延迟改小点
   setTimeout(function () {
@@ -80,7 +86,7 @@ function setTimer(min) {
   subject.end = new Date(0);
   if (!(min = prompt("倒计时分钟数", 20)))
     return console.warn(send("由于操作取消，未生成临时科目。"));
-  var end = new Date(now);
+  let end = new Date(now);
   end.setMinutes(end.getMinutes() + +min);
   $("⏱️", today.date, fixDigit(now.getHours()) + ":" + fixDigit(now.getMinutes()), fixDigit(end.getHours()) + ":" + fixDigit(end.getMinutes()));
   console.log(send("添加了一个 " + today.date + " 从 " + getClock(subject.start) + " 到 " + getClock(subject.end) + " 的倒计时"));
@@ -94,7 +100,7 @@ function setTimer(min) {
 @param toEnd 结束时间（格式为 hh:mm）
 @param toMainslogan 大标语
 @param toSubslogan 小标语
-@param toAdmit 提前入场分钟数，默认为exam对象中的$admit
+@param toAdmit 提前入场分钟数，默认为exams对象中的$admit
 */
 function $(toSubject, toDate, toStart, toEnd, toMainslogan, toSubslogan, toAdmit) {
   if (now < subject.end) {
@@ -126,7 +132,7 @@ slogan.update = function () {
 timer.update = function () {
   document.getElementById("clock").innerHTML = getClock(now);
   if (now >= subject.end) {
-    exam[subject.on]();
+    exams[subject.current]();
     subject.duration = subject.duration;
     // document.getElementById("subject").innerHTML = subject.name;
     // document.getElementById("duration").innerHTML = subject.duration;

js/cover.js

@@ -5,8 +5,14 @@ function playCover(msg) {
   // document.getElementById("covermsg").innerHTML = msg;
   // eleCoverbar.style.width = "100%"; 
   eleCover.style.display = "flex";
-  setTimeout(function () { eleCover.style.opacity = ""; }, 0);
-  setTimeout(function () { eleCover.style.opacity = "0"; }, 2000);
-  setTimeout(function () { eleCover.style.display = ""; }, 2500);
+  setTimeout(function () {
+    eleCover.style.opacity = "";
+  }, 0);
+  setTimeout(function () {
+    eleCover.style.opacity = "0";
+  }, 2000);
+  setTimeout(function () {
+    eleCover.style.display = "";
+  }, 2500);
   return msg;
 }

js/exam.js

@@ -4,14 +4,23 @@ console.groupEnd();
 /* 
  * 适用于宝鸡中学的考试科目列表
  */
-today.gone22 = parseInt((Date.now() - new Date(2022, 5, 9)) / 864E5);
-today.cee24 = parseInt((new Date(2024, 5, 8) - Date.now()) / 864E5);
-exam["2022-05-14"] = function () {
-  slogan.$main = today.cee22 + "天后 峰顶相会";
-  $("晚修", today.date, "22:30", "23:30");
-  return today.date + "临时";
+
+let specialDate = {
+  gone22: parseInt((Date.now() - new Date(2022, 5, 9)) / 864E5),
+  cee24: parseInt((new Date(2024, 5, 8) - Date.now()) / 864E5),
+}
+
+
+exams["2022-05-14"] = {
+  title: "临时考练",
+  mainSlogan: `${specialDate.cee22}天后 峰顶相会`,
+  schedule() {
+    $("考练", today.date, "22:30", "23:30");
+  }
 };
-exam[23] = function () {
+
+exams[23] = function () {
+  subject.type = "23届走了";
   slogan.$main = "留好照片 因为我们就要出发";
   slogan.$sub = [
     "1025天前，2020年8月13日，我拿到了录取通知书。",
@@ -35,10 +44,10 @@ exam[23] = function () {
     "今天是2023年6月4日，我们也即将要离开了。",
     "我和宝中的故事，未完待续。",
   ];
-  return "23届走了";
 }
-exam[24] = function () {
-  slogan.$main = "距离高考" + today.cee24 + "天";
+exams[24] = function () {
+  subject.type = "高三日常";
+  slogan.$main = `距离高考${specialDate.cee24}天`;
   subject.$admit = 2;
   // 夏季作息时间，上午竟然要上五节课
   // 秋季作息时间竟然也是
@@ -51,7 +60,7 @@ exam[24] = function () {
   $("第3节", today.date, "09:50", "10:30");
   $("第4节", today.date, "10:40", "11:20");
   $("第5节", today.date, "11:30", "12:10");
-  if (today.summer) {
+  if (today.isSummer) {
     $("第6节", today.date, "14:25", "15:05", null, null, 5);
     $("第7节", today.date, "15:15", "15:55");
     $("第8节", today.date, "16:10", "16:50", null, null, 7);
@@ -71,29 +80,29 @@ exam[24] = function () {
     $("晚三", today.date, "20:40", "22:10", null, null, 7);
     $("晚修", today.date, "22:20", "23:30");
   }
-  return "高三日常";
 }
-exam[241] = function () {
+exams[241] = function () {
+  subject.type = "高三理科";
   slogan.$sub = ["高二第一学期期末暨模块结业考试(理科)：请以实际铃声为准。"];
   $("数学", "2023-01-29", "14:00", "16:00");
   $("化学", "2023-01-29", "16:30", "18:10");
   $("语文", "2023-01-30", "07:40", "10:10");
   $("生物", "2023-01-30", "10:40", "12:20");
   $("英语", "2023-01-30", "14:00", "16:00");
   $("物理", "2023-01-30", "16:30", "18:00");
-  return "高三理科";
 };
-exam[242] = function () {
+exams[242] = function () {
+  subject.type = "高三文科";
   slogan.$sub = ["高二第一学期期末暨模块结业考试(文科)：请以实际铃声为准。"];
   $("数学", "2023-01-29", "14:00", "16:00");
   $("历史", "2023-01-29", "16:30", "18:10");
   $("语文", "2023-01-30", "07:40", "10:10");
   $("地理", "2023-01-30", "10:40", "12:20");
   $("英语", "2023-01-30", "14:00", "16:00");
   $("政治", "2023-01-30", "16:30", "18:00");
-  return "高三文科";
 };
-exam[251] = function () {
+exams[251] = function () {
+  subject.type = "高二物理";
   slogan.$sub = ["高二第一学期期中考试：请以实际铃声为准。"];
   $("语文", "2023-11-10", "07:40", "10:10");
   $("化学", "2023-11-10", "10:40", "12:10");
@@ -103,9 +112,9 @@ exam[251] = function () {
   $("生物", "2023-11-11", "10:30", "12:00");
   $("物理", "2023-11-11", "14:00", "15:30");
   $("政治", "2023-11-11", "16:00", "17:30");
-  return "高二物理";
 };
-exam[252] = function () {
+exams[252] = function () {
+  subject.type = "高二历史";
   slogan.$sub = ["高二第一学期期中考试：请以实际铃声为准。"];
   $("语文", "2023-11-10", "07:40", "10:10");
   $("化学", "2023-11-10", "10:40", "12:10");
@@ -115,9 +124,9 @@ exam[252] = function () {
   $("生物", "2023-11-11", "10:30", "12:00");
   $("历史", "2023-11-11", "14:00", "15:30");
   $("政治", "2023-11-11", "16:00", "17:30");
-  return "高二历史";
 };
-exam[261] = function () {
+exams[261] = function () {
+  subject.type = "高一";
   slogan.$sub = ["高一第一学期期中考试：请以实际铃声为准。"];
   $("语文", "2023-11-10", "08:00", "10:00");
   $("生物", "2023-11-10", "10:30", "12:00");
@@ -127,5 +136,4 @@ exam[261] = function () {
   $("化学", "2023-11-11", "10:30", "12:00");
   $("物理", "2023-11-11", "14:00", "15:30");
   $("地理", "2023-11-11", "16:00", "17:00");
-  return "高一";
 };