File tree Expand file tree Collapse file tree 5 files changed +91
-0
lines changed
FLASK PROJECTS/Anniversary time Expand file tree Collapse file tree 5 files changed +91
-0
lines changed Original file line number Diff line number Diff line change
1
+ # Anniversary Timing
2
+
3
+ Simple timing page implemented using flask
Original file line number Diff line number Diff line change
1
+ from flask import Flask , render_template
2
+ from datetime import datetime
3
+
4
+ app = Flask (__name__ )
5
+
6
+ # 在此定义纪念日日期
7
+ anniversary_date = datetime (2024 , 6 , 16 )
8
+
9
+ @app .route ('/' )
10
+ def index ():
11
+ current_date = datetime .now ()
12
+ delta = current_date - anniversary_date
13
+ days_passed = delta .days
14
+ return render_template ('index.html' , days_passed = days_passed , anniversary_date = anniversary_date .strftime ("%Y-%m-%d %H:%M:%S" ))
15
+
16
+ if __name__ == '__main__' :
17
+ app .run (debug = False )
Original file line number Diff line number Diff line change
1
+ body {
2
+ margin : 0 ;
3
+ padding : 0 ;
4
+ font-family : Arial, sans-serif;
5
+ background : url ('background.jpg' ) no-repeat center center fixed;
6
+ background-size : cover;
7
+ color : white;
8
+ display : flex;
9
+ justify-content : center;
10
+ align-items : center;
11
+ height : 100vh ;
12
+ }
13
+
14
+ .container {
15
+ text-align : center;
16
+ background-color : rgba (0 , 0 , 0 , 0.5 );
17
+ padding : 20px ;
18
+ border-radius : 10px ;
19
+ }
20
+
21
+ h1 {
22
+ font-size : 3em ;
23
+ }
24
+
25
+ .time {
26
+ font-size : 2em ;
27
+ margin-top : 20px ;
28
+ }
29
+
30
+ .time span {
31
+ font-weight : bold;
32
+ }
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6
+ < title > Anniversary</ title >
7
+ < link rel ="stylesheet " href ="{{ url_for('static', filename='style.css') }} ">
8
+ < script >
9
+ function updateTimer ( ) {
10
+ const anniversaryDate = new Date ( "{{ anniversary_date }}" ) ;
11
+ const currentDate = new Date ( ) ;
12
+ const timeDiff = currentDate - anniversaryDate ;
13
+
14
+ const days = Math . floor ( timeDiff / ( 1000 * 60 * 60 * 24 ) ) ;
15
+ const hours = Math . floor ( ( timeDiff % ( 1000 * 60 * 60 * 24 ) ) / ( 1000 * 60 * 60 ) ) ;
16
+ const minutes = Math . floor ( ( timeDiff % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) ) ;
17
+ const seconds = Math . floor ( ( timeDiff % ( 1000 * 60 ) ) / 1000 ) ;
18
+
19
+ document . getElementById ( "days" ) . innerText = days ;
20
+ document . getElementById ( "hours" ) . innerText = hours ;
21
+ document . getElementById ( "minutes" ) . innerText = minutes ;
22
+ document . getElementById ( "seconds" ) . innerText = seconds ;
23
+ }
24
+
25
+ setInterval ( updateTimer , 1000 ) ;
26
+ </ script >
27
+ </ head >
28
+ < body onload ="updateTimer() ">
29
+ < div class ="container ">
30
+ < h1 > It has passed the xx anniversary</ h1 >
31
+ < div class ="time ">
32
+ < span id ="days "> 0</ span > 天
33
+ < span id ="hours "> 0</ span > 小时
34
+ < span id ="minutes "> 0</ span > 分钟
35
+ < span id ="seconds "> 0</ span > 秒
36
+ </ div >
37
+ </ div >
38
+ </ body >
39
+ </ html >
You can’t perform that action at this time.
0 commit comments