添加倒计时

src/dinner.py

@@ -101,6 +101,7 @@ def dinner_update():
     :return: 响应内容
     """
     user_agent_string = request.headers.get('User-Agent')
+    print(user_agent_string)
     if not is_mobile_request(user_agent_string):
         abort(403)
     if check_roll() != 0:

templates/dinner.html

@@ -29,7 +29,8 @@
     </form>
     <button type="button" class="btn btn-primary" onclick="update()">更新</button>
     <button type="button" class="btn btn-secondary" onclick="clearValue()">不吃</button>
-    <button type="button" class="btn btn-secondary" {{ "" if can_roll == True else 'disabled="disabled"' | safe }}
+    <button type="button" id="btnRoll"
+            class="btn btn-secondary" {{ "" if can_roll == True else 'disabled="disabled"' | safe }}
             onclick="roll()">开始抽签
     </button>
     <div style="padding-top: 40px">
@@ -46,7 +47,8 @@
             {% endfor %}
         </ul>
     </div>
-    <div class="fixed-bottom" style="padding-bottom: 20px"><a class="link-secondary" style="text-decoration: none; font-size: 0.8rem"
+    <div class="fixed-bottom" style="padding-bottom: 20px"><a class="link-secondary"
+                                                              style="text-decoration: none; font-size: 0.8rem"
                                                               href="https://git.zaneyork.cn:8443/ZaneYork/dinner_vote">本项目抽签完全公开透明，源码开放欢迎随时审查</a>
     </div>
 </div>
@@ -98,6 +100,31 @@
             }
         })
     }
+
+    $(function () {
+        const counterId = window.setInterval(counter, 1000);
+
+        function counter() {
+            const now = new Date();
+            const targetTime = new Date(
+                now.getFullYear(), now.getMonth(), now.getDate(),
+                17, 30, 0, 0
+            );
+            const diff = targetTime - now;
+            btn = $("#btnRoll");
+            if (diff <= 0) {
+                window.clearInterval(counterId);
+                btn.text('开始抽签');
+                btn.attr('disabled', null)
+                return;
+            }
+            // Convert diff to hours, minutes, and seconds
+            const hours = Math.floor(diff / (1000 * 60 * 60)).toString().padStart(2, '0');
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
+            const seconds = Math.floor((diff % (1000 * 60)) / 1000).toString().padStart(2, '0');
+            btn.text(hours + ':' + minutes + ':' + seconds)
+        }
+    });
 </script>
 </body>
 </html>